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