jquery+json的6种ajax请求

最新推荐文章于 2024-08-01 15:56:04 发布

@航空母舰

最新推荐文章于 2024-08-01 15:56:04 发布

阅读量120

点赞数

分类专栏： JS 组件

本文链接：https://blog.csdn.net/hudeyong926/article/details/99540380

版权

JS 组件专栏收录该内容

21 篇文章 0 订阅

订阅专栏

跨域的方法

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

header实现跨域

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

HTML代码：

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

<?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) 可以实现同步

<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(XMLHttpRequest, textStatus) {
                    alert("ajax error!"+textStatus);
                },
                success:callback
            });
            return false;
        });
    });
    function callback(jsondata) {
        $("#rename").html(jsondata.name);
        $("#resex").html(jsondata.sex);
    }
</script>

第二种方式：2、load(url,data,callback)

<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)

<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) 异步请求

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

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

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

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

header实现跨域

<?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)

<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])

<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; }