JavaScript之Ajax-6 Ajax的增强操作(jQuery对Ajax的支持、表单操作)

一、jQuery对Ajax的支持
load() - 作用: 将服务器返回的数据字节添加到符合要求的节点之上 - 用法: $obj.load(请求地址，请求参数) - 请求参数 - "username=tom&age=22" - {'username':'tom','age':22} - 有请求参数时，load方法发送POST请求，否则发送GET请求
get() - 作用: 发送GET类型的请求 - 用法: $.get(请求地址，请求参数，回调函数，服务器返回的数据类型) - 说明:
- 回调函数添加的参数是服务器返回的数据
- 服务器返回的数据类型:
html: HTML文本
text: 文本
JSON: js对象
xml: XML文档
script: JavaScript脚本

ajax()
- 用法: $.ajax({});
- {}内可以设置的选项参数
- url: 请求地址
- type: 请求方式
- data: 请求参数
- dataType: 服务器返回的数据类型
- success: 服务器处理正常对应的回调函数
- error: 服务器出错对应的回调函数
- async: true(缺省)

getScript()
- 作用: 通过 HTTP GET 请求载入并执行 JavaScript 文件
- 用法: $.getScript(url,success(response,status));
- url: 将要请求的URL字符串
- success(response,status):可选，规定请求成功后执行的回调函数
response - 包含来自请求的结果数据
status - 包含请求的状态
sucess
notmodified
error
timeout
parsererror

一、表单操作
使用 Ajax 提交数据 - step 1: 获取表单元素，通过 document.getElementById或者jQuery的工厂函数获取页面元素值 - step 2: 将获取的页面元素值拼凑成字符串或者JSON字符串 - step 3: 使用Ajax异步提交表单






表单的序列化 - 序列化: 将对象状态转换为可保持或传输的格式过程 - 表单序列化:将表单元素转换为可提交的字符串或者JSON字符串 - 通过序列化可以轻松实现数据存储和传输 - 在jQuery中可以通过serialize()方法将表单元素序列化成普通字符串，通过serializeArray()方法将表单元素序列化成JSON字符串
serialize()方法 - 格式: var data = $("#formId").serialize(); - 功能: 将表单内容序列化成一个字符串 - 这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为$("#formId").serialize()即可



serializeArray()方法 - 格式: var jsonData = $("#formId").serializeArray(); - 功能: 将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串 - 比如, [{"name":"wcm","age":"18"},{...}]获取数据为jsonData[0].name




异步表单的提交 - 可以通过Ajax异步的提交表单，从而获得良好的用户体验 - step 1: 获取表单提交方式、服务器地址、序列化表单 - step 2: 通过Ajax 异步的将内容提交给服务器 - step 3: 表单提交方法中返回false，即阻止表单默认提交



使用jQuery.form异步提交表单 - jQuery Form 插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级 HTML表单及支持Ajax jQuery Form 有两个核心方法 -- ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能 - ajaxForm(): 不能提交表单。在document的ready函数中，使用ajaxForm来为Ajax提交表单进行准备 - ajaxSubmit(): 马上由Ajax来提交表单。你可以在任何情况下进行该项提交 - ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数，当为单个参数时，该参数既可以是一个回调函数，也可以是一个options对象


beforeSubmit:showRequest


success:showResponse


总结：本章内容主要介绍了 Ajax的增强操作(jQuery对Ajax的支持、表单操作)