欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery中的ajax-(json数据格式)代码实例讲解

程序员文章站 2024-01-15 17:34:16
一:基本内容      json——javascript object notation(js原生支持);数据格式源于jav...

一:基本内容

     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代码:

[html] view plain copy

<!doctype html>  

<html>  

<head>  

<meta charset="utf-8">  

<title>jquery中的ajax实现二级联动</title>  

<script src="jquery-1.11.3.js"></script>  

</head>  

<body>  

<select id="province">  

    <option>-请选择-</option>  

</select>  

<select id="city">  

    <option>-请选择-</option>  

</select>  

<script>  

$(function(){  

    var pd={"status":1};  

    $.get("jqueryejld.php",pd,function(data){  

        for(var i=0;i<data.length;i++){  

             $("#province").append($("<option>"+data[i]+"</option>"));  

        }  

    },"json");  

});  

    province.onchange=function(){  

        $("#city").empty().append($("<option>-请选择-</option>"));  

        var pr={"status":2,"province":$("#province").val()};  

        $.post("jqueryejld.php",pr,function(data){  

            for(var i=0;i<data.length;i++){  

            $("#city").append($("<option>"+data[i]+"</option>"));     

            }  

        },"json")  

    }  

      

</script>  

</body>  

</html>  

  php代码:

[html] view plain copy

<?php  

$status=$_request['status'];  

if($status==1){  

    echo'["重庆市","北京市","天津市","河北省"]';  

}  

else{  

    $province=$_request['province'];  

     switch($province){  

        case '重庆市':  

            echo'["渝中区","渝北区","沙坪坝区","九龙坡区","两江新区","北碚区"]';  

            break;  

        case '北京市':  

            echo'["东城区","西城区","海淀区","朝阳区"]';  

            break;  

        case '天津市':  

            echo'["河东区","河西区","南开区"]';  

            break;  

        case '河北省':  

            echo'["石家庄市","廊坊市","保定市","唐山市","秦皇岛市"]';  

            break;  

    }  

}  

?>  

三:表单的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代码:

                    

[html] view plain copy

<!doctype html>  

<html>  

<head>  

<meta charset="utf-8">  

<title>表单的ajax异步请求表单序列化</title>  

<script src="jquery-1.11.3.js"></script>  

</head>  

<body>  

<form id="myform" action="formxlh.php" method="post" onsubmit="return formsubmit();">  

    <input type="text" name="username"><br>  

    <input type="text" name="pwd"><br>  

    <input type="radio" name="r1" value="男孩子">男<input type="radio" name="r1" value="女">女<br>  

    <input type="submit" value="注册">  

</form>  

<script>  

function formsubmit(){  

    var data=$("#myform").serialize();  

    $.post("formxlh.php",data,function(data){  

        console.log(data);  

    },"json");  

    return false;  

}     

</script>  

</body>  

</html>  

  php代码:

  

[html] view plain copy

<?php  

$username=$_post['username'];  

$pwd=$_post['pwd'];  

$r1=$_post['r1'];  

echo'{"username":"'.$username.'","pwd":"'.$pwd.'","r1":"'.$r1.'"}';  

  

?>