jquery+json的6种ajax请求
跨域的方法
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 () {
alert("ajax error!");
},
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:[email protected]}
getScript是通过 HTTP GET 请求载入并执行一个 JavaScript 文件。很简单，而且在当前的例子中不适用，所以略过。 ps:php判断是否为ajax请求可以用$_SERVER['HTTP_X_REQUESTED_WITH']，如 if(strtolower($_SERVER['HTTP_X_REQUESTED_WITH'])=='xmlhttprequest') return true; }
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo