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

实例1

test.html

1 2 3 4 5 6 7 8 9 10 11 12

<! 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

1 2 3 4 5 6 7 8 9 10 11 12 13

$.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

1 2 3 4 5 6 7 8

<?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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<! 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

$(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

1 2 3 4 5 6 7 8

<?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  . ')' ;   //返回格式，必需 ?>