一.客户端代码(html+js) Basic/jsonp_test.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
<body>
<form class="test_jsonp">
<input type="text" name="loginuser"/>
<input type="text" name="loginpass" />
<button type="button" class="json_button">提交</button>
</form>
</body>
</html>
<script type="text/javascript">
$(function(){
/* 第一种方法 远程跨域请求 使用jsonp协议*/
$(".json_button").on("click",function(){
alert($(".test_jsonp").serialize());
$.ajax({
"url" : "http://www.liubf.com/Bang/post_jsonp.php",
"type" :"GET",
"dataType": "jsonp",
"data": {
"loginuser" : $("input[name=loginuser]").val(),
"loginpass" : $("input[name=loginpass]").val()
},
"success":function(response,status,xhr){
for (var i in response){
alert(i + "---" +response[i]);
}
},
"error":function(xhr,errorText,errorStatus){
alert("ajax访问错误：" + xhr.status + " " +xhr.statusText );
}
});
});
/* 第二种方法 远程跨域请求 使用?callback协议*/
/*
$(".json_button").on("click",function(){
alert($(".test_jsonp").serialize());
$.ajax({
"url" : "http://www.liubf.com/Bang/post_jsonp.php?callback=?",
"type" :"GET",
"dataType": "json",
"data": {
"loginuser" : $("input[name=loginuser]").val(),
"loginpass" : $("input[name=loginpass]").val()
},
"success":function(response,status,xhr){
for (var i in response){
alert(i + "---" +response[i]);
}
},
"error":function(xhr,errorText,errorStatus){
alert("ajax访问错误：" + xhr.status + " " +xhr.statusText );
}
});
});
*/
});
</script>
二.服务器代码(php)
<?php
//远程跨域请求 必须以$_get接收
$arr = array("a" => 110 , "b" => 150 ,"c" =>130);
$_result = json_encode($arr);
$callback = $_GET[‘callback‘];
echo $callback."($_result)";
?>
时间： 2024-12-04 18:32:53