今天来学习AJAX

实例：使用AJAX提交form表单，包括AJAX文件上传。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

向服务器发送请求一般用GET，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

jQuery serialize() 方法：serialize() 方法通过序列化表单值创建 URL 编码文本字符串。

https://www.jb51.net/article/108208.htm 《如何理解jQuery中的ajaxSubmit方法》

序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程。

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。

jQuery load() 方法

$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

jQuery $.get() 方法：$.get(URL,callback);

jQuery $.post() 方法：jQuery $.post() 方法

猜你喜欢