首先处理服务器代码，使返回的数据符合特定的格式，为了方便这里使用了php
test.php代码如下
1 <?php
2 $con = mysql_connect("localhost","root","root");
3 mysql_select_db("test", $con);
4
5 $result = mysql_query("select username,password from user");
6 while ($row = mysql_fetch_array($result)) {
7 $com[] = $row;
8 }
9
10 $callback = $_GET["jsonpcallback"];
11 $json=json_encode($com);
12 echo $callback.‘(‘."$json".‘)‘;
13 ?>
$json的输出值为[{"0":"1","username":"1","1":"1","password":"1"},{"0":"admin","username":"admin","1":"1","password":"1"}]，是一个标准的json，但这个页面需要处理跨域，所以需要把json包裹成callback([{"0":"1","username":"1","1":"1","password":"1"},{"0":"admin","username":"admin","1":"1","password":"1"}])的格式输出给浏览器
html代码如下
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Insert title here</title>
6 <script src="js/jquery.min.js" type="text/javascript"></script>
7 <script>
8 $(function(){
9 var URL="http://localhost/test.php";
10 $.ajax({
11 type : ‘GET‘,
12 url : URL,
13 dataType : ‘jsonp‘,
14 jsonp : ‘jsonpcallback‘,
15 success : function(data) {
16 alert(JSON.stringify(data));
17 }
18 });
19 });
20 </script>
21 </head>
22 </html>
输出结果
jsonp只支持"GET"的请求，这是加载跨域数据的原理决定的，虽然jquery使用了$.ajax()函数获取数据，但是jsonp获取数据真正做法并不是ajax，而是使用动态加载js的方式。
使用jquery实现跨域请求数据
时间： 2024-10-17 14:47:32