JS----Jsonp 简单使用

巴黎的灯光下

Jsonp 简单使用

客户端 - 直接提交:getJSON:

1. $.getJSON("http://127.0.0.1/test.php?jsoncallback=?&t=5555&name=jack", function(data){
   
2.     console.log(data)
   
3.     console.log(data.name)  
   
4. })

复制代码

客户端 - ajax提交:

1. $('#form').on('submit', function(event) {
   
2.     window.event.returnValue = false;
   
3. 
   
4.     $.ajax({
   
5.         url: "http://127.0.0.1/test/t1.php?t=5555",       // 服务器地址要注意是ipv4的，ipv6测试暂时没成功。
   
6.         data:{name:'jack', age:$("[name='age']").val()},  // 传递数据
   
7.         type: "POST",                                     // get/post都可以的请求方式
   
8.         async: false,                                     // 是否同步，false为异步加载        
   
9.         dataType: "jsonp",                                // 设置返回数据类型jsonp      
   
10.         jsonp: "jsoncallback",                            // jsonp的字段，服务器返回的前缀要和这个一样
    
11.         success: function (data) {
    
12.             console.log(data)   
    
13.             // console.log(data[0].name)
    
14. 
    
15.             // 取数据：遍历数据
    
16.             var ul = '<ul>';
    
17.             // data为获取的数据，记得给服务器设置charset=utf-8;否则返回中文乱码
    
18.             $.each(data, function (i, v) {
    
19.                 ul += '<li>' + v.name + '</li>';
    
20.             });
    
21. 
    
22.             ul +='</ul>';
    
23. 
    
24. 
    
25.             $("#result").append(ul);
    
26. 
    
27.         },
    
28.         error: function () {
    
29.             console.log('fail');
    
30.         }
    
31.     });
    
32. })

复制代码

服务端:

1. header("Content-type:text/html;charset=utf-8");
   
2. 
   
3. // htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体。
   
4. // 获取回调函数名
   
5. $jsoncallback = isset($_REQUEST['jsoncallback']) ? htmlspecialchars($_REQUEST['jsoncallback']) : '';
   
6. 
   
7. // 方式1：json数据
   
8. $jsonData1 = '[{name:"jack"},{name:"tom"}]';
   
9. 
   
10. // 方式2：获取数据. 主意要为$_GET
    
11. $jsonData2 = json_encode($_GET);
    
12. 
    
13. // 输出json数据
    
14. echo $jsoncallback . "(" . $jsonData1 . ")";

复制代码