PHP AJAX JSONP实现跨域请求使用实例

最新推荐文章于 2022-07-22 10:53:04 发布

luyaran

最新推荐文章于 2022-07-22 10:53:04 发布

阅读量308

点赞数 1

分类专栏：接口类杂谈

杂谈同时被 2 个专栏收录

157 篇文章

订阅专栏

接口类

28 篇文章

订阅专栏

本文介绍如何使用jQuery库实现JSONP跨域请求，包括设置请求方式、回调函数等，并通过两个实例展示了具体的应用场景，如按钮点击触发请求及表单序列化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test.html

 
         <!doctype html> 
        
         <html> 
        
         <head> 
        
         <meta charset="utf-8"> 
        
         <title>test</title> 
        
         <script src="jquery-1.5.2.min.js"></script> 
        
         <script src="ajax.js"></script> 
        
         </head> 
        
         <body> 
        
         </body> 
        
         </html>

ajax.js

 
         $.ajax({ 
        
             type : "post", 
        
             url : "ajax.php", 
        
             dataType : "jsonp", 
        
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 
        
             jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 
        
             success : function(json){ 
        
                 alert('success'); 
        
             }, 
        
             error:function(){ 
        
                 alert('fail'); 
        
             } 
        
         });

ajax.php

 
         <?php  
        
         $data = "......."; 
        
         $callback = $_GET['callback']; 
        
         echo $callback.'('.json_encode($data).')'; 
        
         exit; 
        
         ?>

jquery-1.5.2.min.js

自己上网下载

当使用jsonp时，使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

实例2

test.html

 
         <!doctype html> 
        
         <html> 
        
         <head> 
        
         <meta charset="utf-8"> 
        
         <title>test</title> 
        
         <script src="jquery-1.5.2.min.js"></script> 
        
         <script src="ajax.js"></script> 
        
         </head> 
        
         <body> 
        
         <form name="form"> 
        
         <input type="text" name="sex"> 
        
         <input type="text" name="age"> 
        
         <input type="button" id="btn" value="button" /> 
        
         </form> 
        
         </body> 
        
         </html>

ajax.js

 
         $(document).ready(function(){ 
        
             $("#btn").click(function(k) { 
        
                 //... 
        
                 var j = $("form").serializeArray();//序列化name/value 
        
                 $.ajax({ 
        
                     type: 'GET',  //这里用GET 
        
                     url: 'ajax.php', 
        
                     dataType: 'jsonp',  //类型 
        
                     data: j, 
        
                     jsonp: 'callback', //jsonp回调参数，必需 
        
                     async: false, 
        
                     success: function(result) {//返回的json数据 
        
                         alert(result.message); //回调输出 
        
                         result = result || {}; 
        
                         if (result.msg=='err'){ 
        
                             alert(result.info); 
        
                         }else if (result.msg=="ok"){ 
        
                             alert('提交成功'); 
        
                         }else{ 
        
                             alert('提交失败'); 
        
                         } 
        
                     }, 
        
                     timeout: 3000 
        
                 }) 
        
                 //... 
        
             }); 
        
         });

ajax.php

 
      <?php 
     
      $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需 
     
      $date = array("age"=>$_GET['age'], "message"=>$_GET['age']); 
     
      $date["msg"]="err"; 
     
      $date["info"]="因人品问题，发送失败"; 
     
      $tmp= json_encode($date); //json 数据 
     
      echo $callback . '(' . $tmp  .')';  //返回格式，必需 
     
      ?>