jQuery 中的 Ajax 怎么使用

jQuery 中的 Ajax

jQuery对JavaScript语言和Ajax异步交互进行了封装，提供了六个操作方法

• load()方法
• $.get()与$.post()方法
• $.ajax方法 （初步封装）
• $.getScript()方法和 $.getJSON()方法 （获取脚本）

jQuery 除了封装了六个Ajax操作的方法，还提供了：

• ajaxStart() 和 ajaxStop()事件 （开始异步交互和结束异步交互）
• ajaxComplete()事件、ajaxSend()事件、 ajaxError()事件和ajaxSuccess()事件 （完成、发送、出错、成功）

load()方法

​ —— jQuery里最简单的Ajax方法

$element.load(url,[data],[callBack]);  

• url:请求HTML页面的url地址
• data:发送给服务器端的key/value形式的数据内容
• callBack:Ajax请求完成时间的回调函数

注意:load()方法的请求方式由是否传递参数决定。

​ GET – 传递参数；

​ POST – 不传递；

$.get()与$.post()方法

• $.get() 方法使用 GET 方式向服务器端发送异步请求。

  $.get(url,[data],[callback],[type]);
  

  • url:请求HTML页面的url地址。
  • data:发送给服务器端的key/value形式的数据内容。
  • callback: Ajax请求完成时的回调函数。
  • type:设置返回数据内容的格式。值为xml、html、 script、json、text和_defaulto

• $.post()方法使用GET方式向服务器端发送异步请求。

  $.post(url,[data],[callback],[type]);
  /* url: 请求HTML页面的url地址。
     data: 发送给服务器端的key/value形式的数据内容。
     callback:  Ajax请求完成时的回调函数。
     type: 设置返回数据内容的格式。值为xml、html、 script、json、text和_defaulto
  */
  

$.ajax方法

是jQuery中最底层的Ajax方法

$.ajax(url,[settings]);
/*
	url: 请求HTML页面的url地址。
	settings: key/value形式的请求设置，所有参数都是可选的。
*/

$.getScript()方法

是jQuery中用于动态加载指定JavaScript文件

$.getScript(url,[callback]);

/* 
url: 请求JavaScript文件的url地址。
calback: 指定JavaScript文件成功加载后的回调函数。
*/

$.getJSON()方法

是jQuery中用于动态加载指定JSON格式的数据内容

$.getJSON(url,[data],[callback]);
/*
url:请求JavaScript文件的url地址。
data:发送给服务器端的key/value形式的数据内容。
callback:指定JavaScript文件成功加载后的回调函数。
*/

异步提交表单的步骤

所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式实现表单提交。

实现步骤：

• 获取表单及所有表单组件对应的数据值。
• 将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。
• 通过Ajax异步交互方式提交表单。