jquery+json的6种ajax请求

最新推荐文章于 2025-06-29 11:10:32 发布

转载最新推荐文章于 2025-06-29 11:10:32 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/42884

文章标签：

#json #php #java

本文介绍了使用jQuery发起AJAX请求的六种方法，并详细解释了每种方式的具体实现过程及应用场景，包括基本的同步请求到复杂的跨域数据获取。

跨域的方法

JSONP跨域GET请求
通过iframe实现跨域
flash跨域HTTP请求
window.postMessage

header实现跨域

serialize序列表表格内容为字符串,不支持form嵌套中的子form

HTML代码：

    Java代码  
     
   
<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代码：

    Java代码  
     
   
<?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);  
?>  

第一种方式：1、jQuery.ajax(options) 可以实现同步

    Java代码  
     
   
<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)

    Java代码  
     
   
<script type="text/javascript">  
$(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;  
    });  
});  
</script>  

load方式可以在url后面加选择器的，语法形如 "url #some > selector"，但这里的例子返回的数据是json格式，所以就不能加选择器，这里只是为了演示，所以就用一个隐藏的div来载入json数据，然后在回调函数里显示出来，在实际项目中是不会这样整的。。。

第三种方式：3、jQuery.get(url,data,callback,type)

    Java代码  
     
   
<script type="text/javascript">  
$(document).ready(function(){  
    $(":submit").click(function(){  
        var str=$("#myform").serialize();  
        $.get("show.php",str,function(jsondata){  
            $("#rename").html(jsondata.name);  
            $("#resex").html(jsondata.sex);  
        },"json");  
        return false;  
    });  
});  
</script>  

第四种方式：4、jQuery.getJSON(url,data,callback) 异步请求

    Java代码  
     
   
<script type="text/javascript">  
$(document).ready(function(){  
    $(":submit").click(function(){  
        var str=$("#myform").serialize();  
        $.getJSON("show.php",str,function(jsondata){  
            $("#rename").html(jsondata.name);  
            $("#resex").html(jsondata.sex);  
        });  
        return false;  
    });  
});  
</script>   

getJSON还可以通过JSONP协议来进行跨域调用数据。只要用jsonp方式就只能是get，因为本质是script方式加载的一个简单的例子：

a站www.a.com 下放置一个调用页面client.html，代码：

    Java代码  
     
   
<script type="text/javascript">  
$.getJSON("http://www.b.com/server.php?name=jackie&sex=boy&callback=?",function(data){  
    alert(data.name+" "+data.sex);  
});  
</script>  

b站www.b.com 下放置返回json的php文件 server.php，代码：

    Java代码  
     
   
<?php  
    $name=$_REQUEST['name'];  
    $sex=$_REQUEST['sex'];  
    $jsondata="{name:'".$name."',sex:'".$sex."'}";  
    echo $_GET['callback']."(".$jsondata.")";  
?>  

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

header实现跨域

    Server.php代码  
     
   
<?php  
// 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)

    Java代码  
     
   
<script type="text/javascript">  
$(document).ready(function(){  
    $(":submit").click(function(){  
        var str=$("#myform").serialize();  
        $.post("show.php",str,function(jsondata){  
            $("#rename").html(jsondata.name);  
            $("#resex").html(jsondata.sex);  
        },"json")  
        return false;  
    });  
});  
</script>  

第六种方式：jQuery.getScript(url,[callback])

    Js代码  
     
   
<html>  
<head>  
<title>JQuery学习</title>  
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
    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;  
        });  
    });  
});  
</script>  
</head>  
<body>  
<button id="btnTest">BtnTest</button>  
<div id="result"></div>  
</body>  
</html>  

远程服务器端js.txt的内容为:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}

getScript是通过 HTTP GET 请求载入并执行一个 JavaScript 文件。很简单，而且在当前的例子中不适用，所以略过。 ps:php判断是否为ajax请求可以用$_SERVER['HTTP_X_REQUESTED_WITH']，如 if(strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])=='xmlhttprequest') return true; }