首先处理服务器代码,使返回的数据符合特定的格式,为了方便这里使用了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的方式。

posted on 2014-07-02 11:41  幸福小弥  阅读(545)  评论(0编辑  收藏  举报