jQuery ajax 异步请求
Posted The snail
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery ajax 异步请求相关的知识，希望对你有一定的参考价值。
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>
作用：
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>
以上是关于jQuery ajax 异步请求的主要内容，如果未能解决你的问题，请参考以下文章