jQuery - AJAX 简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。 |
jQuery对ajax的支持
$(json_arr).each()
方法1:jQuery遍历json数组
// 语法
$(json_arr).each(function(index, obj){
index:遍历出来的元素的下标;
obj:遍历出来的元素;
});
$.each(json_arr, function(i, obj)
方法2:jQuery遍历json数组
//利用全局数组
$.each(json_arr, function(i, obj){
index:遍历出来的元素的下标;
obj:遍历出来的元素;
json_arr:js的json普通数组
console.log('unma:'+obj.uname);
});
$obj.load()
作用
把指定URL的HTML内容 加载到指定的元素中
语法
$obj.load(url, data, callback)
$obj:显示内容的元素(HTML元素)
url:请求地址
data:向url传入的参数【可选择】
方式1(GET请求):
查询字符串:key=value&key1=value1...
方式2(POST请求):
使用js对象/JSON对象
{"name":"gengyufei"}
【注意】:不传参数时,默认get请求
callback:响应成功回调该函数【可选择】
$.get()
作用:
通过get方式异步的向远程地址发送请求
$.get(url, data, callback, type)
url:请求地址
data:传递到服务器端的参数
1、字符串:"name=geng&age=18"
2、js对象:
{
name:'geng',
age:18
}
callback:响应成功后的回调函数
// data:后端返回到前端的返回值
eg:function(data){
console.log(data)
}
type:响应回来的数据格式
取值如下:
1.html:响应回来的文本是html文本
2.text:响应回来的文本是text文本
3.script:响应回来的文本是js执行脚本
4.json:响应回来的文本是json格式的文本
实例:
<head>
// 引入jQuery
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script>
</head>
<body>
<button id="btn">ajax_jquery_get</button>
<div id="ajax_jquery_get_show"></div>
<script>
$(function () { // $(function ()作用:等待页面加载完毕,再执行js代码
// 获取btn对象(按钮事件)
$('#btn').click(function () {
// 主角出现:jQuery的get方法
// $.get(url, data, 回调函数, type)
$.get('/ajax/jquery_get_server/', function (data) {
// 假装'/ajax/jquery_get_server/'该地址返回json字串:{"uname": "...", "age":"..."}
var msg = 'name is ' + data.uname;
msg += 'age is ' + data.age;
// 在id=ajax_jquery_get_show的div元素内显示msg
// $('#id_html').html(msg)作用:在id=id_html的html元素内,显示msg
$('#ajax_jquery_get_show').html(msg);
}, 'json')
})
})
</script>
</body>
$.post()
作用:
通过post方式异步的向远程地址发送请求
注意: post方式,参数:必须包含csrf_token!!!(这个是针对Django开发来讲的,如果是其他语言或者框架,另当别论)
$.get(url, data, callback, type)
url:请求地址
data:传递到服务器端的参数
1、字符串:"name=geng&age=18"
2、js对象:
{
name:'geng',
age:18
csrf:
}
callback:响应成功后的回调函数
// data:后端返回到前端的返回值
eg:function(data){
console.log(data)
}
type:响应回来的数据格式
取值如下:
1.html:响应回来的文本是html文本
2.text:响应回来的文本是text文本
3.script:响应回来的文本是js执行脚本
4.json:响应回来的文本是json格式的文本
实例:
<head>
// 引入jQuery
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script>
</head>
<body>
{# $.post() #}
<div>
name:<input type="text" id="input_name">
age: <input type="text" id="input_age">
<input type="submit" id="submit" value="提交">
</div>
<script>
$(function () { // $(function ()作用:等待页面加载完毕,再执行js代码
$('#submit').click(function () {
var data = {
name:$('#input_name').val(),
age:$('#input_age').val(),
// 关键点:没有csrf_token,会报错:403,forbidden
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
}
// $.post(url, data, func, type)
// 假装'/ajax/jquery_get_server/'该地址返回json字串:{"msg": "..."}
$.post('/ajax/jquery_post_server/', data, function (res) {
// alert :在浏览器弹窗,显示后端返回信息
alert('response msg is'+ res.msg);
}, 'json')
})
})
</script>
</body>
$.ajax()-终极模式(企业常用)
作用:
jQuery对ajax的终极支持!!!
# 最高频使用的8个参数:
参数对象中的属性:
1.url:字符串,表示异步请求的地址
2.type:字符串,请求方式:get或post
3.data:传递到服务器端的参数
1、字符串:"name=geng&age=18"
2、js对象:
{
name:'geng',
age:18
csrf:
}
4.dataType:字符串,响应回来的数据的格式
1.'html'
2.'xml'
3.'text'
4.'script'
5.'json'
6.'jsonp' //有关跨域的响应格式
5.success:回调函数,请求和响应成功时,回来执行的操作
6.error:回调函数,请求或响应失败时,回来执行的操作
7.beforeSend:回调函数,发送ajax请求之前,执行的操作,如:return false,则终止请求
8.async:是否为异步请求,true为异步,false为同步
语法:
$.ajax({
url:'',
type:'get'/'post',
data:{
name:'',
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
dataType:'json',
success:function () {
},
error:function(){
},
beforeSend:function(){
},
})
实例:
$("button").click(function(){
$.ajax({
url:"demo_test.txt",
type:'post',
data:{
name:'',
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
dataType:'json',
success:function(result){
$("#div1").html(result);
},
beforeSend:function(){
},
});
});
beforeSend经典用法:
- 场景:用户注册
- 功能:
- 用户输入账号密码完毕
- 点击【提交】按钮完毕
- 在网络传输过程中,网速慢的情况下,显示动画效果,等待服务器响应
- 在网络传输过程中,网速慢的情况下,提交按钮变为灰色不可用状态,直到得到服务器响应
- 代码实现:
<head>
// 引入jQuery
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script>
</head>
{# $.ajax() #}
<body>
<span id="loading" style="display: none">加载中...[我是动画]</span>
<button id="btn">jquery ajax</button>
<script>
$(function () {
$('#btn').click(function () {
$.ajax({
url: '/ajax/jquery_ajax',
type: 'post',
data:{
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
},
dataType:'json',
async:true,
success:function () {
// post 请求发送成功
$('#loading').hide(3000); // 3秒内消失
// 弹框:登录成功
alert('登录成功');
// 提交按钮改为可用状态
$('#btn').removeAttr('disabled');
},
error:function () {
},
beforeSend:function () {
// 发送前,do something
$('#loading').show(); // 发送前,让等待元素span显示(show)
// 发送前,让button置灰,不可点击
$('#btn').attr({disabled:'disabled'})
},
})
})
})
</script>
</body>
经典用法:异步获取用户列表
- 场景:异步刷新用户列表界面
- 实例:
<head>
// 引入jQuery
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script>
</head>
<body>
<button id="btn">show data</button>
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="show"></tbody>
<script>
$(function () {
$('#btn').click(function () {
$.ajax({
url: '/ajax/jquery_show',
type: 'get',
dataType: 'json',
async: true,
data: {},
success: function (data) {
var html = '';
$.each(data, function (i, obj) {
html += '<tr>';
html += '<td>' + obj.name + '</td>';
html += '<td>' + obj.age + '</td>';
html += '</tr>';
});
$('#show').html(html); // 在id= show的html标签显示用户信息
},
error: function () {
},
beforeSend: function () {
},
})
})
})
</script>
</body>