ajax
jquery ajax操作：
######################
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
函数 描述
jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素，返回 JSON 数据结构数据。
################################
原生JS与jQuery对AJAX的实现
一、定义
W3C里这么解释AJAX：
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
就是利用JS来无刷新与后端交互，通过get和post方式把数据发送到后端，或者请求后端的数据，然后根据请求的数据进行改变DOM节点等操作，从而取消掉用form的submit方式一提交就会跳转页面的情况，像在创建账号的时候检测此用户名是否存在就是一个典型的案例，本文讲从原生JS和jQuery方面介绍AJAX的实现，跨域问题暂且不表。
二、原生JS实现AJAX
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
1.GET
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xmlhttp.send();-
传递参数直接在?后指定，多个参数用&分隔
-
GET请求同一URL时会有缓存，通过参数是否一致来判断
-
解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()
2.POST
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}-
POST没有缓存
-
POST发送的数据量大
-
AJAX无法发送文件
-
readyState改变时触发onreadystatechange事件，4为完成
-
status是返回状态，200是成功，404是未找到页面
-
responseText是返回的数据，为字符串格式
三、jQuery实现AJAX
1.GET
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：$.get(url,[callback])
$.get("demo_test.php?id=1&name=lemoo",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});-
参数通过URL传递
-
有缓存
2.POST
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：$.post(url,[data],[callback])
$.post("demo_test.php",{
num:1
},
function (data) {
alert(data);
});使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：$(selector).serialize()
3.ajax
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：$.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
$.ajax({
type:"post",
url:"demo_test.php",
data: { num: 123 },
dataType:"text",
success: function (data) {
alert(1);
}
});4.getJSON
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：$.getJSON(url,[data],[callback])
可以与$.each搭配来遍历数据
$.getJSON("demo_test.php",function(data){
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});这样返回的数据直接就是JSON格式的就可以使用，但是要注意缓存问题。
实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 {% csrf_token %} 9 10 <input type="button" onclick="Do();" value="Do it"> 11 12 <script src="/js/jquery-3.3.1.min.js"></script> 13 <script src="/js/jquery.cookie.js"></script> 14 <script type="text/javascript"> 15 var csrftoken = $.cookie('csrftoken'); 16 17 function csrfSafeMethod(method) { 18 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 19 } 20 21 $.ajaxSetup({ 22 beforeSend: function (xhr, settings) { 23 if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 24 xhr.setRequestHeader("X-CSRFToken", csrftoken); 25 } 26 } 27 }); 28 29 function Do() { 30 $.ajax({ 31 url: "/lx/test/", 32 data: {id: 1}, 33 type: "POST", 34 success: function(data){ 35 console.log(data); 36 } 37 }); 38 } 39 </script> 40 </body> 41 </html>
1 from django.shortcuts import HttpResponse,render_to_response 2 3 4 def test(request): 5 if request.method == 'POST': 6 print(request.POST) 7 return HttpResponse('ok') 8 # return render_to_response('lx/test.html',context=RequestContext(request,)) 9 return render_to_response('lx/test.html')
