ajax跨域获取json数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax跨域获取json数据相关的知识，希望对你有一定的参考价值。
一.客户端代码(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)";
?>本文出自 “刘博方的博客” 博客，请务必保留此出处http://liubofang.blog.51cto.com/11162557/1859410
以上是关于ajax跨域获取json数据的主要内容，如果未能解决你的问题，请参考以下文章