jQuery中的ajax-(json数据格式)

一:基本内容

     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到 点击打开链接

       














你可能感兴趣的:(前端)