天天看點

jquery+json的6種ajax請求

跨域的方法

jsonp跨域get請求

通過iframe實作跨域

flash跨域http請求

window.postmessage

header實作跨域

serialize序清單表格内容為字元串,不支援form嵌套中的子form

html代碼:

jquery+json的6種ajax請求

<form id="myform">  

姓名:<input type="text" name="name" size="10" />  

性别:<input type="radio" name="sex" value="男" />男  

<input type="radio" name="sex" value="女" />女  

<input type="submit" value="ok" />  

</form>  

<div id="rename"></div>  

<div id="resex"></div>  

<div id="re" style="display:none"></div>  

 show.php代碼:

jquery+json的6種ajax請求

<?php  

header("cache-control: no-cache, no-store, must-revalidate, max-age=-1");  

header("content-type: application/json; charset=utf-8");  

$user['name']="姓名:".$_request['name'];  

$user['sex']="性别:".$_request['sex'];  

echo json_encode($user);  

?>  

jquery+json的6種ajax請求

<script type="text/javascript">  

    $(document).ready(function () {  

        $(":submit").click(function () {  

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

            $.ajax({  

                url:"show.php",  

                type:"post",  

                data:str,  

                datatype:"json",  

                timeout:1000,  

                error:function () {  

                    alert("ajax error!");  

                },  

                success:callback  

            });  

            return false;  

        });  

    });  

    function callback(jsondata) {  

        $("#rename").html(jsondata.name);  

        $("#resex").html(jsondata.sex);  

    }  

</script>  

 第二種方式:2、load(url,data,callback)

jquery+json的6種ajax請求

$(document).ready(function(){  

    $(":submit").click(function(){  

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

        $("#re").load("show.php",str,function(jsondata){  

            data=eval("("+jsondata+")");  

            $("#rename").html(jsondata.name);  

            $("#resex").html(jsondata.sex);  

        return false;  

});  

load方式可以在url後面加選擇器的,文法形如 "url #some > selector",但這裡的例子傳回的資料是json格式,是以就不能加選擇器,這裡隻是為了示範,是以就用一個隐藏的div來載入json資料,然後 在回調函數裡顯示出來,在實際項目中是不會這樣整的。。。

第三種方式:3、jquery.get(url,data,callback,type)

jquery+json的6種ajax請求

        $.get("show.php",str,function(jsondata){  

        },"json");  

 第四種方式:4、jquery.getjson(url,data,callback) 異步請求

jquery+json的6種ajax請求

        $.getjson("show.php",str,function(jsondata){  

</script>   

getjson還可以通過jsonp協定來進行跨域調用資料。隻要用jsonp方式就隻能是get,因為本質是script方式加載的一個簡單的例子:

jquery+json的6種ajax請求

$.getjson("http://www.b.com/server.php?name=jackie&sex=boy&callback=?",function(data){  

    alert(data.name+" "+data.sex);  

jquery+json的6種ajax請求

    $name=$_request['name'];  

    $sex=$_request['sex'];  

    $jsondata="{name:'".$name."',sex:'".$sex."'}";  

    echo $_get['callback']."(".$jsondata.")";  

jquery+json的6種ajax請求

callback({name:'this is json data',sex:'男'})  

 header實作跨域

jquery+json的6種ajax請求

// ajax通過設定access-control-allow-origin來實作跨域通路比較簡單.指定允許其他域名通路  

header('access-control-allow-origin:*');  

// 響應類型  

header('access-control-allow-methods:post, get, options');  

// 響應頭設定  

header('access-control-allow-headers:x-requested-with,content-type');  

第五種方式:5、jquery.post(url,data,callback,type)

jquery+json的6種ajax請求

        $.post("show.php",str,function(jsondata){  

        },"json")  

 第六種方式:jquery.getscript(url,[callback])

jquery+json的6種ajax請求

<html>  

<head>  

<title>jquery學習</title>  

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>  

    var obtntest = $("#btntest");  

    obtntest.click(function(){  

        obtntest.disabled = true;  

        var oresult = $("#result");  

        oresult.html("loading").css("color","red");  

        jquery.getscript("http://app.cntvs.com/test/js.txt",  

        function(){  

            oresult.html("name:" + jimmy.name + "<br/>email:" + jimmy.email).css("color","black");  

            obtntest.disabled = false;  

</head>  

<body>  

<button id="btntest">btntest</button>  

<div id="result"></div>  

</body>  

</html>  

 遠端伺服器端js.txt的内容為:

var jimmy = {name:"jimmy.yang",email:[email protected]}