Ajax
|
兜兜转转一大圈，在它支持Markdown后又回来了。。 ? 概念学习ajax之前需要的知识储备--json需要注意：// 属性名必须使用双引号 必会方法：JSON.parse('JSON') 注： BeJson 、SoJson在线工具可定位和检查格式 ajax简介ajax（Asynchronous Javascript And XML），用JS语言与服务器进行异步交互。
除了异步的特点外，还可实现：浏览器页面局部刷新。 常见的应用场景例如百度搜索时输入字符后，会出现一个相关联的下拉列表。当输入框变化，浏览器用ajax技术相服务器发送请求，查看包含字符的前5项，然后把查询结果相应给浏览器，浏览器渲染显示。
优点优点：
示例：用jQuery实现<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>
<button class="send_Ajax">send_Ajax</button>
<script>
//$.ajax的两种使用方式:
//$.ajax(settings);
//$.ajax(url,[settings]);
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",type:"POST",data:{username:"abc",password:123},success:function(data){
alert(data)
},//=================== error============
error: function (jqXHR,textStatus,err) {
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态
// err: 底层通过throw抛出的异常对象，值与错误类型有关
console.log(arguments);
},//=================== complete============
complete: function (jqXHR,textStatus) {
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态 success | error
console.log('statusCode: %d,statusText: %s',jqXHR.status,jqXHR.statusText);
console.log('textStatus: %s',textStatus);
},//=================== statusCode============
statusCode: {
'403': function (jqXHR,err) {
console.log(arguments); //注意：后端模拟errror方式：HttpResponse.status_code=500
},'400': function () {
}
}
})
})
</script>
</body>
</html>
viewimport json,time
def index(request):
return render(request,"index.html")
def handle_Ajax(request):
username=request.POST.get("username")
password=request.POST.get("password")
print(username,password)
time.sleep(10)
return HttpResponse(json.dumps("Error Data!"))
$.ajax参数请求参数data---------################
data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。
function testData() {
$.ajax("/test",{ //此时的data是一个json形式的对象
data:{
a:1,b:2
}
}); //?a=1&b=2
processData---------################
processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个［object，Object］形式的结果。
contentType---------################
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
比如contentType:"application/json"，即向服务器发送一个json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,b:33
}),contentType:"application/json",}); //{a: 22,b: 33}
注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
views.py: json.loads(request.body.decode("utf8"))
traditional---------################
traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},traditional为false会对数据进行深层次迭代；
响应参数dataType： 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。
默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；
比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容
进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式
的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
注： 在服务端设定好返回的数据类型 return HttpResponse(json.dumps(a),content_type="application/json")
javascript实现AjaxAjax核心
使用流程1.打开与服务器的链接（open方法） open(method,url,async) - method：请求方式，post或get - URL：服务器的URI（资源地址），若get请求可追加参数。 - async：是否异步，默认为TRUE 2.发送请求（send方法） 3.接受响应 XMLHttpRequest对象的五种状态：
为防止在1234时都引发。要使用对象的readyState属性拿到状态值。 发送post请求注意事项要使用setRequestheader设置content-type请求头，因form表单默认不设定，不然会忽略请求体内容 小结例：用户名是否被注册填完光标移开后就像服务器发送异步请求，服务器返回布尔值，客户端根据布尔值渲染用户框 步骤： jQuery的serialize()用于序列化表单元素并编码为utf-8，用于提交，提交有name和value值的。 使用时 $("form").serialize() form表单上传文件设置input的type为file Ajax的FormData对象实现Ajax上传文件用于异步上传二进制文件。 用$.ajax({……,data:formdata,……}) 发送到服务端 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |