ajax快速入门
一、ajax简单入门
1.Ajax的实现步骤
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.高数ajax请求地址及请求方式
//第一个参数就是请求方式，第二个参数是请求地址
xhr.open('get', 'http://www.baidu.com');
// 3.发送请求
xhr.send()
// 4.获取服务端给客户响应的数据
xhr.onload = function () {
console.log(xhr.responseText)
}
2.处理后台返回的数据
由于用原生的ajax请求数据时，服务器响应的数据要转换为字符串。因此我们需要把返回的数据用
JSON.parse()转换为JSON对象
示例：
// 1.创建ajax对象
var xhr = new XMLHttpRequest()
// 2.告诉ajax对象要想哪发送请求，以什么方式发送请求
xhr.open('get', 'http://localhost:3000/requestDate')
// 3.发送请求
xhr.send()
// 获取服务端响应的数据
xhr.onload = function () {
// 服务端给客户端响应的JSON对象通过ajax传递时必须转换为字符串类型
// 通过JSON.parse()将字符串转换为JSON对象
var res = JSON.parser(xhr.responseText)
console.log(res)
// 将JSON对象与HTML进行拼接
var str = '<h2>' + res.name + res.age + '</h2>'
// 利用dom把html追加到也饿面当中即可
document.body.innerHTML = str
}
3.传递get请求参数
使用ajax传递get请求参数我们需要手动拼接参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script>
//获取元素
var btn = document.getElementById('btn');
var username = document.getElementById('username');
var age = document.getElementById('age');
//为按钮添加点击事件
btn.onclick = function(){
//创建ajax对象
var xhr = new XMLHttpRequest();
//获取用户在文本框输入的值
var nameValue = username.value;
var ageValue = age.value;
// alert(nameValue);
// alert(ageValue);
//使用ajax 发送get请求，我们要手动拼接get参数
//拼接请求参数
var params = 'username='+nameValue+'&age='+ageValue;
//告诉ajax请求方式和请求的地址
xhr.open('get','http://localhost:3000/get?'+params);
//发送请求
xhr.send();
//获取服务器响应的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
4.传递post请求参数
post请求需要设置请求参数格式的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="btn">
</p>
<script>
//获取元素
var btn = document.getElementById('btn');
var username = document.getElementById('username');
var age = document.getElementById('age');
//为按钮添加点击事件
btn.onclick = function(){
//创建ajax对象
var xhr = new XMLHttpRequest();
//获取用户在文本框输入的值
var nameValue = username.value;
var ageValue = age.value;
// alert(nameValue);
// alert(ageValue);
//拼接请求参数
var params = 'username='+nameValue+'&age='+ageValue;
//告诉ajax请求方式和请求的地址
xhr.open('post','http://localhost:3000/post');
//设置请求权参数格式的类型，(post请求必须要设置)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求
xhr.send(params);
//获取服务器响应的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
5.向服务器端传递JSON格式的请求参数
通过设置setRequestHeader请求头告诉服务器客户端向服务端传递的请求参数的格式是什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('post', 'http://localhost:3000/json');
// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
xhr.setRequestHeader('Content-Type', 'application/json');
// 3.发送请求，格式只能是字符串，JSON.stringify() 将json对象转换为json字符串
xhr.send(JSON.stringify({name: 'lisi', age:50}));
// 4.获取服务器端响应到客户端的数据
xhr.onload = function (){
console.log(JSON.parse(xhr.responseText));
}
</script>
</body>
</html>
6.获取服务器端响应数据的另一种方式
各个阶段readyState对应值的含义
| readyState | 0表示已经创建了ajax对象 但是还没有对ajax对象进行配置 |
|---|---|
| readyState | 1表示已经对ajax对象进行配置 但是还没有发送请求 |
| readyState | 2 请求已经发送了 |
| readyState | 3 已经接收到服务器端的部分数据了 |
| readyState | 4 服务器端的响应数据已经接收完成 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
// 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
console.log(xhr.readyState);
xhr.open('get', 'http://localhost:3000/readystate');
// 1 已经对ajax对象进行配置 但是还没有发送请求
console.log(xhr.readyState);
// 当ajax状态码发生变化的时候出发
xhr.onreadystatechange = function() {
// 2 请求已经发送了
// 3 已经接收到服务器端的部分数据了
// 4 服务器端的响应数据已经接收完成
console.log(xhr.readyState);
// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
}
xhr.send(); </script>
</body>
</html>
7.Ajax错误处理
当xhr的http状态码为400就是请求失败了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">发送Ajax请求</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function () {
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get', 'http://localhost:3000/error');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function (){
console.log(xhr.responseText);
//xhr.status获取http状态码
console.log(xhr.status);
if(xhr.status == 400){
alert('出差错啦！！！');
}
}
//当网络中断会触发onerror事件
xhr.onerror=function(){
alert('网络中断，无法发送Ajax请求');
}
}
// Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
// Http状态码: 表示请求的处理结果 是服务器端返回的
</script>
</body>
</html>
相关http状态码到的解释
对网站管理工作者来说有个词不陌生，HTTP状态码，它是用以表示网页服务器HTTP响应状态的3位数字代码。状态码的第一个数字代表了响应的五种状态之一。
1XX系列：指定客户端应相应的某些动作，代表请求已被接受，需要继续处理。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。
2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。
200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 '202 Accepted'
202状态码：服务器已接受请求，但尚未处理
3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。
301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。
401状态码：请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。
404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
5xx系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。
500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复
了解基本SEO状态码，是SEO优化人员必备知识。HTTP状态码是服务器和客户端之间交流信息的语言。通过查看网站日志的HTTP码，我们可以清楚查看搜索引擎在网站的爬取情况。
8.Ajax缓存
在请求地址后面添加一个随机数，解决ie低版本缓存的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">发送Ajax请求</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function () {
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
//在请求地址后面添加一个随机数，解决ie低版本缓存的问题
xhr.open('get', 'http://localhost:3000/cache?t='+Math.random());
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onreadystatechange = function (){
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
} }
</script>
</body>
</html>
9.Ajax异步请求
请求属于一个异步操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get', 'http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onreadystatechange = function (){
if (xhr.readyState == 4) {
console.log('2')
console.log(xhr.responseText)
} }
console.log('1');
</script>
</body>
</html>
以上代码执行的结果为
请求数据需要时间，因此先打印了1，后打印了2
10.ajax函数封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function ajax(options){ var defaults = {
type:'get',
url:'',
data:{},
header:{
'Content-Type': 'application/x-www-form-urlencoded'
},
success:function(){},
error:function(){}
} // 使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults,options); //创建ajax对象
var xhr = new XMLHttpRequest(); //判断请求方式处理客户端传递的参数
var params = '';
for(var attr in defaults.date){
params += attr + '=' + defaults.date[attr] + '&';
}
//去掉最后面多出来的&
params = params.substr(0,params.length-1);
// console.log(params); if(defaults.type == 'get'){
defaults.url = defaults.url + '?' + params;
} //配置ajax
xhr.open(defaults.type,defaults.url);
if(defaults.type == 'post'){
var contentType = defaults.header['Content-Type'];
//设置请求权参数格式的类型，(post请求必须要设置)
xhr.setRequestHeader('Content-Type',contentType);
//如果是json格式就把对象转换为字符串发送给服务器
if(contentType == 'application/json'){
xhr.send(JSON.stringify(defaults.date));
}else{
xhr.send(params);
} }else{
//发送请求
xhr.send();
} //监听load事件，当xhr接收完响应数据时触发
xhr.onload=function(){ //xhr.getResponseHeader()获取响应头数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText; // 如果响应类型中包含application/json
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText)
} //当http状态码等于200的时候
if(xhr.status == 200){
//请求成功 调用处理成功情况的函数
defaults.success(responseText);
}else {
//请求失败调用
defaults.error(responseText,xhr);
}
}
} //调用ajax函数
ajax({
//请求方式
type:'post',
//请求地址
url:'http://localhost:3000/requestDate',
success:function(data){
console.log('这里是success函数');
console.log(data);
}
}) /*
请求参数要考虑的问题 1.请求参数位置的问题 将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置 get 放在请求地址的后面 post 放在send方法中 2.请求参数格式的问题 application/x-www-form-urlencoded 参数名称=参数值&参数名称=参数值 name=zhangsan&age=20 application/json {name: 'zhangsan', age: 20} 3.接收数据的处理
如果传递过去的是json格式的数据，
服务器响应的数据要转换为json格式 1.传递对象数据类型对于函数的调用者更加友好
2.在函数内部对象数据类型转换为字符串数据类型更加方便 */
</script>
</body>
</html>
二、jquery中ajax的使用
1.$.ajax方法基本使用
参数说明
| 参数 | 参数说明 |
|---|---|
| type | 请求方式(get,post,delete,put等等) |
| url | 请求的地址 |
| data | 请求的参数 |
| contentType | 指定参数的格式类型 |
| beforeSend | 在发送之前会被调用的函数 |
| success | 请求成功后的回调函数 |
| error | 请求失败以后的回调函数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax方法基本使用</title>
</head>
<body>
<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
$('#btn').on('click',function(){
$.ajax({
//请求方式
type:'post',
//请求地址
url:'/app',
//请求成功以后调用的函数
success:function(result){
//result为服务器返回的数据
//方法内会自动将json字符串转换为json 对象
console.log(result);
},
//请求失败以后函数被调用
error:function(xhr){
console.log(xhr); }
})
})
</script>
</body>
</html>
2.$.ajax方法传递请求参数
以json字符串的格式传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax方法基本使用</title>
</head>
<body>
<button id="btn">发送请求</button>
<script src="/js/jquery.min.js"></script>
<script>
var params = {name: 'wangwu', age: 300}
$('#btn').on('click', function () {
$.ajax({
// 请求方式
type: 'post',
// 请求地址
url: '/user',
// 向服务器端发送的请求参数
// name=zhangsan&age=100
// data: {
// name: 'zhangsan',
// age: 100
// },
data: JSON.stringify(params),
// 指定参数的格式类型
contentType: 'application/json',
//在请求发送前会被调用
beforeSend:function(){
alert('请求即将发送');
// return false; },
// 请求成功以后函数被调用
success: function (response) {
// response为服务器端返回的数据
// 方法内部会自动将json字符串转换为json对象
console.log(response);
}
})
});
</script>
</body>
</html>
3.serialize方法说明
$(this).serialize()可以将表单内容拼接成字符串类型的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>serialize方法说明</title>
</head>
<body>
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('#form').on('submit', function () {
// 将表单内容拼接成字符串类型的参数username=123&password=123
// var params = $(this).serialize();
// console.log(params) username=123&password=123 console.log(serializeObject($(this)))
//阻止表单默认行为
return false;
}); // 将表单中用户输入的内容转换为对象类型
function serializeObject (obj) {
// 处理结果对象
var result = {};
//serializeArray()将表单的数据转换为数组，数组里面是表单数据对象
// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
var params = obj.serializeArray(); // 循环数组 将数组转换为对象类型
$.each(params,function(i,ele){
result[ele.name] = ele.value;
})
// 将处理的结果返回到函数外部
return result;
} </script>
</body>
</html>
三、模板引擎的简单使用
atr-template官网http://aui.github.io/art-template/
1.快速上手
一、引入art-template.js文件
<script src="template-debug.js"></script>
二、编写HTML模板
使用一个type="text/html"的script标签存放模板：
<script type="text/html" id="tpl">
<span>姓名：{{name}}</span><br>
<span>年龄：{{age}}</span>
</script>
三、向模板插入数据，并输出到页面
var data = {
name: '张三',
age: 20
}
var html = template("tpl",data);
document.getElementById('container').innerHTML = html;
四、完整代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>渲染模板</title>
</head> <body>
<div id="container"></div>
<!-- 引入模板引擎 -->
<script src="js/template-web.js"></script>
<!-- 拼接数据 -->
<script type="text/html" id="tpl">
<span>姓名：{{name}}</span><br>
<span>年龄：{{age}}</span>
</script> <script>
//告诉模板引擎哪个数据和哪个模板进行拼接 返回拼接好的html
var data = {
name: '张三',
age: 20
}
var html = template('tpl', data);
//利用dom操作元素，把拼接好的html添加到页面当中
document.getElementById('container').innerHTML = html;
</script>
</body> </html>
执行结果
2.原文输出
在属性面前加一个@或者#表示原文输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原文输出</title>
</head>
<body>
<div id="container"></div>
<script src="js/template-web.js"></script>
<script type="text/html" id="tpl">
<div>
<!-- 在属性名前面加@或者#表示原文输出 -->
<span>姓名：{{# name}}</span>
<span>年龄：{{age}}</span>
</div>
</script>
<script>
var data = {
name: '<b>李四</b>',
age: 30
} // 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
var html = template('tpl', data);
console.log(html);
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
3.简单的语法
<!-- 标准语法-->
<p>{{name}}</p>
<p>{{1+1}}</p>
<p>{{1+1 == 2 ? '相等' : '不相等'}}</p>
<p>{{content}}</p>
<p>{{@content}}</p>
<!-- 原始语法 -->
<p><%=name%></p>
<p><%=1+1%></p>
<p><%=1+1 == 2 ? '相等' : '不相等'%></p>
<p><%=content%></p>
<p><%-content%></p>
3.1if语法
// 标准
{{if age > 18}}
年龄大于18
{{else if age < 15}}
年龄小于15
{{else}}
年龄不符合要求
{{/if}} // 原生
<%if(age < 15) {%>
年龄小于15
<%} else if (age >18) {%>
年龄大于18
<%} else {%>
年龄不符合要求
<%}%>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件判断</title>
</head>
<body>
<div id="container"></div>
<script src="js/template-web.js"></script>
<script type="text/html" id="tpl">
<div>
<span>姓名：{{@ name}}</span>
<span>年龄：{{age}}</span>
</div>
<!-- 标准语法 -->
{{if age > 18}}
<div>年大于18</div>
{{else}}
<div>年龄小于18</div>
{{/if}} <!-- 原生语法 -->
<%if (age > 18) {%>
<div>年大于18</div>
<%}%><%else{%>
<div><%=age%>年龄小于18</div>
<%}%>
</script>
<script>
var data = {
name: '<b>李四</b>',
age: 17
} // 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
var html = template('tpl', data);
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
3.2循环
<ul>
{{each users}} //user为循环的对象
<li>
{{$value.name}} // $value表示每个循环项 $index表示每个循环的索引
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul> <ul>
<%for(var i =0;i<users.length;i++){%>
<li>
<%=users[i].name%>
<%=users[i].age%>
<%=users[i].sex%>
</li>
<%}%>
</ul>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环</title>
</head>
<body>
<div id="container"></div>
<script src="js/template-web.js"></script>
<script type="text/html" id="tpl">
<ul>
<!-- 标准写法 -->
{{each data}}
<li>
<span>姓名：{{$value.name}}</span>
<span>年龄：{{$value.age}}</span>
</li>
{{/each}}
<br>
<!-- 原生写法 -->
<%for (var i = 0;i < data.length;i++){%>
<li>
<span>姓名：<%=data[i].name%></span>
<span>年龄：<%=data[i].age%></span>
</li>
<%}%>
</ul>
</script>
<script>
// 这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接
var html = template('tpl', {
data: [{
name: '张三',
age: 15
}, {
name: '李四',
age: 20
}, {
name: '王五',
age: 10
}]
});
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
3.3导入模板变量
通过
template.defaults.imports.dateFormat = xxx的方式导入向模板导入定义的变量或者函数
模板中通过$import.xxx的方式引入
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入模板变量</title>
</head>
<body>
<div id="container"></div>
<script src="js/template-web.js"></script>
<script type="text/html" id="tpl">
<div>当前时间是{{$imports.dateFormat(date)}}</div>
</script>
<script>
window.onload = function () {
//向模板中导入变量
template.defaults.imports.dateFormat = dateFormat; //告诉模板引擎要将哪个模板和哪个数据进行拼接,返回拼接好的字符串
var html = template('tpl',{
date:new Date()
})
console.log(html);
document.getElementById('container').innerHTML = html;
} function dateFormat(date){
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDay() + '日' ;
} </script>
</body>
</html>
ajax快速入门的更多相关文章
- SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- html5快速入门（一）—— html简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- AngularJS 30分钟快速入门【译】
引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...
- AngularJS快速入门指南18：Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17：Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
随机推荐
- Github中添加SSH key
1-创建密钥,在终端输入下面的命令 ssh-keygen -t rsa -b -C "你的邮箱" //双引号不能去 要求输入密码,建议回车使用空密码方便以后的每次连接,此时会生成一 ...
- 分析并封装排序算法(js,java)
前言 本次来分享一下排序的api底层的逻辑,这次用js模拟,java的逻辑也是差不多. 先看封装好的api例子: js的sort排序 java的compareTo排序 自己模拟的代码(JS) func ...
- postcss.config.js not found
https://github.com/ElemeFE/element/issues/10249
- 深入理解React：diff 算法
目录 序言 React 的核心思想 传统 diff 算法 React diff 两个假设 三个策略 diff 具体优化 tree diff component diff element diff 小结 ...
- Win10+YOLOv3完整安装过程（亲测可运行）
最近了解并尝试在Win10安装YOLOv3,参考了十几篇文章,发现每个人都有自己的安装方式,最初尝试用cmake编译,虽然安装完成,但无法使用GPU,坑非常多,经2天努力终于安装成功,分享并记录自己的 ...
- 列拖拽顺序调整-sortable.js使用
最近在做一个单表统计功能,涉及到一个查询列配置,但是查询出来的列顺序,可以进行配置,通过写列的排序当然阔以,但是方法就不美丽了.所以,在网上搜了一下拖拽的组件,最终定位Sortable.js,简单易用 ...
- CentOS 7 的防火墙开启2
在虚拟机 CentOS 7 上装了 Nginx,结果发现另一台电脑无法访问其默认页面,通过 telnet 192.168.1.88 80 监听发现是 http 80 端口被 CentOS 7 的防火墙 ...
- abp一代数据迁解析
abp版本5.9 概述 数据迁移无非就是两件事情,1.创建数据库,并根据实体创建对应的表:2.添加一些初始数据 abp的数据迁移也是完成这两件事,比较特殊的是它是多租户saas系统,而且支持不同的租户 ...
- VulnHub::DC-1
实验环境 一共有五个flag,有多种方法去提权,我们最终目标是去拿到/root的flag.总的来说,难度不高,适合新人练手 渗透过程 0x01 信息搜集 由于不知道靶机IP地址,进行D段扫描,获得靶机 ...
- Python之爬虫（十四） Scrapy框架的架构和原理
这一篇文章主要是为了对scrapy框架的工作流程以及各个组件功能的介绍 Scrapy目前已经可以很好的在python3上运行Scrapy使用了Twisted作为框架,Twisted有些特殊的地方是它是 ...