一:基本内容
json——javascript object notation(js原生支持);数据格式源于javascript,易于程序员阅读与编写,易于计算机解析和生 成,在网络上使用较广泛,几乎取代了xml格式。结构其实就是数组,对象,或者数组对象嵌套。它还支持string,number,booloean,object,array,null数据类型。
这儿主要讲jQuery中的ajax,因为比较简单,易学。
二:jQuery中的ajax
1.jquery主要封装了几个方法,用它们来实现异步交互:
(1)封装第一层:类似于原生ajax的用法
* $.ajax()——这方法最复杂,这儿不做详细说明。
(2)封装第二层:基于第一层再次封装
* $().load(url,data,callback)——最简单局限性最大,而且无法使用XML,JSON数据格式。
* $.get(url,data,callback,type) ——请求类型是GET
* url:设置当前ajax的请求地址
* data:设置当前ajax的请求数据,格式要求key:value,构建Object即可
* callback:ajax请求成功后的回调函数;该函数的形参(data),表示服务器端响应的数据内容
* type:设置服务器端响应的数据格式,默认为html格式,xml:xml格式,json:json格式。
* $.post(url,data,callback,type)——请求类型是POST
* 使用方式与$.get()方法一致。
注:jquery中其实掌握$.get(),与$.post()这两个方法,实现异步交互其实就不难了。
eg:用jquery的$.get(),与$.post()两个方法实现之前的二级联动案例
html代码:
JQuery中的ajax实现二级联动
php代码:
三:表单的ajax异步请求
(一)表单的序列化
1.serialize()方法
* 返回JSON字符串,格式{key:value,key:value,......},所以$.get,post都用它。
* 作用:设置ajax的请求数据,以免表单数据太多,手工构建key:value格式太复杂。
2.serializeArray()方法
*返回JSON对象,格式[obj1,obj2,obj3,......];
3.注意:表单元素必须具有name属性值
(二)表单异步提交方式
1.不在使用submit按钮,而是使用button按钮。
(1)通过button按钮绑定click事件
* 表单的序列化
* 表单的异步提交
2. 依旧使用submit按钮(建议使用)
(1)在form表单元素中绑定onsubmit事件
(2)在onsubmit事件的处理函数中
* 表单的序列化
* 表单的异步提交
* 阻止表单默认行为(return false)
eg:使用onsubmit按钮实现表单异步提交,表单序列化案例
html代码:
表单的AJAX异步请求表单序列化
php代码:
需要了解更多的ajax到 点击打开链接