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

jerry PHP 2015年08月30日 收藏

今天我写的是PHP AJAX JSONP使用的实例。不清楚jsonp是什么的请自己搜索
实例1
test.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>test</title>
  6. <script src="jquery-1.5.2.min.js"></script>
  7. <script src="ajax.js"></script>
  8. </head>
  9.  
  10. <body>
  11. </body>
  12. </html>

 ajax.js

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

 ajax.php

  1. <?php
  2.  
  3. $data = ".......";
  4. $callback = $_GET['callback'];
  5. echo $callback.'('.json_encode($data).')';
  6. exit;
  7.  
  8. ?>

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>test</title>
  6. <script src="jquery-1.5.2.min.js"></script>
  7. <script src="ajax.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <form name="form">
  12. <input type="text" name="sex">
  13. <input type="text" name="age">
  14. <input type="button" id="btn" value="button" />
  15. </form>
  16. </body>
  17. </html>

 ajax.js

  1. $(document).ready(function(){
  2.  
  3.     $("#btn").click(function(k) {
  4.         //...
  5.         var j = $("form").serializeArray();//序列化name/value
  6.         $.ajax({
  7.             type: 'GET',  //这里用GET
  8.             url: 'ajax.php',
  9.             dataType: 'jsonp',  //类型
  10.             data: j,
  11.             jsonp: 'callback', //jsonp回调参数,必需
  12.             async: false,
  13.             success: function(result) {//返回的json数据
  14.                 alert(result.message); //回调输出
  15.                  
  16.                 result = result || {};
  17.                 if (result.msg=='err'){
  18.                     alert(result.info);
  19.                 }else if (result.msg=="ok"){
  20.                     alert('提交成功');
  21.                 }else{
  22.                     alert('提交失败');
  23.                 }
  24.                  
  25.             },
  26.             timeout: 3000
  27.         })
  28.         //...
  29.     });
  30.      
  31. });

 ajax.php

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