jQuery ajax 异步请求
2021-03-31 10:25
标签：nta head java https 外部 each syn callback error: AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。 AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。 jQuery 提供多个与 AJAX 有关的方法。 通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。 方法1：jQuery遍历json数组 方法2：jQuery遍历json数组 把指定URL的HTML内容 加载到指定的元素中 通过get方式异步的向远程地址发送请求 通过post方式异步的向远程地址发送请求 注意： post方式，参数：必须包含csrf_token!!!（这个是针对Django开发来讲的，如果是其他语言或者框架，另当别论） jQuery对ajax的终极支持！！！ 场景：用户注册 功能： 用户输入账号密码完毕 点击【提交】按钮完毕 在网络传输过程中，网速慢的情况下，显示动画效果，等待服务器响应 在网络传输过程中，网速慢的情况下，提交按钮变为灰色不可用状态，直到得到服务器响应 代码实现： 场景：异步刷新用户列表界面 实例： jQuery ajax 异步请求 标签：nta head java https 外部 each syn callback error: 原文地址：https://www.cnblogs.com/gengyufei/p/12585926.htmljQuery - AJAX 简介
什么是 AJAX？
关于 jQuery 与 AJAX
如果没有 jQuery，AJAX 编程还是有些难度的。
jQuery对ajax的支持
$(json_arr).each()
// 语法
$(json_arr).each(function(index, obj){
index:遍历出来的元素的下标;
obj：遍历出来的元素;
});
$.each(json_arr, function(i, obj)
//利用全局数组
$.each(json_arr, function(i, obj){
index:遍历出来的元素的下标;
obj：遍历出来的元素;
json_arr:js的json普通数组
console.log(‘unma:‘+obj.uname);
});
$obj.load()
作用
语法
$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(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格式的文本
实例：
// 引入jQuery
?
$.post()
作用：
$.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格式的文本
实例：
// 引入jQuery
?
{# $.post() #}
$.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经典用法：
// 引入jQuery
?
{# $.ajax() #}
?
经典用法：异步获取用户列表
// 引入jQuery
?
?
name
age