用JQuery的$.getJSON發起跨域Ajax請求

jQuery中經常使用getJSON來調用並獲取遠程的JSON字符串，將其轉換爲JSON對象，若是成功，則執行回調函數。原型以下：javascript

jQuery.getJSON( url, [data], [callback] ) 跨域加載JSON數據。
php

url: 發送請求的地址
data : (可選) 待發送key/value參數
callback: (可選) 載入成功時的回調函數

主要用於客戶端獲取服務器JSON數據。簡單示例：前端

服務器腳本，返回JSON數據：java

 
      1 
      // $.getJSON.php 
     
      2 
      $arr=array("name"=>"zhangsan", "age"=>20);  
     
      3 
      $jarr=json_encode($arr);  
     
      4 
      echo $jarr;

注意兩點：第一：在返回客戶端以前，先用PHP函數json_encode將要返回的數據進行編碼。第二：返回到客戶端用的是echo，而不是return。jquery

下面是核心的客戶端代碼：ajax

 
      01 
      <script language="javascript" type="text/javascript" src="./js/jquery.js"></script>  
     
      02 
      <script language="javascript" type="text/javascript">  
     
      03 
      function getjs()  
     
      04 
      {  
     
      05 
        $.getJSON("$.getJSON.php", {}, function(response){  
     
      06 
                       alert(response.age);  
     
      07 
        });  
     
      08 
      } 
     
      09 
        
      10 
      <input type="button" name="btn" id="btn" value="test" onClick="javascript:getjs();"/>

因爲在PHP中是用JSON編碼返回值，因此此處必須用getJSON去調用PHP文件，從而獲取數據。同時能夠注意到，經由getJSON獲得的數據已經變成了一個對象數組，能夠用response.name，response.age很直觀的獲取返回值。數據庫

jquery提供了$.getJSON的方法，讓咱們能夠實現跨域ajax請求，但jqueryAPI上的內容實在太少，如何用$.getJSON，請求網站應該返回怎樣的數據庫才能讓$.getJSON獲取到，下面我就用一個實際例子來講明下。json

後端是用php的，如下代碼主要實現的一個功能就是提供一個預定登記的接口，須要傳入的數據分別有：用戶姓名、聯繫電話和地址：後端

 
      01 
      /*預定登記 執行 接口*/ 
     
      02 
      case "yuyue_interface": 
     
      03 
          $name = trim($_GET['name']); 
     
      04 
          $phone = trim($_GET['phone']); 
     
      05 
          $addr = trim($_GET['addr']); 
     
      06 
          $dt = date("Y-m-d H:i:s"); 
     
      07 
          $cb = $_GET['callback']; 
     
      08 
          if($name == "" || $name == NULL){ 
     
      09 
              echo $cb."({code:".json_encode(1)."})"; 
     
      10 
          }elseif($phone == "" || $phone == NULL){ 
     
      11 
              echo $cb."({code:".json_encode(2)."})"; 
     
      12 
          }elseif($addr == "" || $addr == NULL){ 
     
      13 
              echo $cb."({code:".json_encode(3)."})"; 
     
      14 
          }else{ 
     
      15 
              $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)"); 
     
      16 
              echo $cb."({code:".json_encode(0)."})"; 
     
      17 
          } 
     
      18 
          exit; 
     
      19 
      break;

接着就是前端的處理了：跨域

 
      01 
      $(document).ready(function(){ 
     
      02 
          //如下3個爲預定登記須要的參數 
     
      03 
          var name = "name";      //varchar類型，長度最多爲8位（4個漢字） 
     
      04 
          var phone = "phone";    //varchar類型，長度爲11位 
     
      05 
          var addr = "addr";      //varchar類型，長度最多爲500位（250個漢字） 
     
      06 
          $.getJSON("http://請求網站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){ 
     
      07 
              if(data.code==1){ 
     
      08 
                  //自定義代碼 
     
      09 
                  alert("姓名不能爲空"); 
     
      10 
              }else if(data.code==2){ 
     
      11 
                  //自定義代碼 
     
      12 
                  alert("手機不能爲空"); 
     
      13 
              }else if(data.code==3){ 
     
      14 
                  //自定義代碼 
     
      15 
                  alert("所在單位不能爲空"); 
     
      16 
              }else{ 
     
      17 
                  //自定義代碼 
     
      18 
                  alert("預定成功"); 
     
      19 
              } 
     
      20 
          }); 
     
      21 
      });

須要注意的是，在後端php代碼裏，必須把傳遞進來的" &callback=? "也輸出來，如：

`1`	`$cb` `=` `$_GET['callback'];`

`2`	`echo` `$cb."({code:".json_encode(4)."})";`

以上就是一個簡單的$.getJSON試驗，經過這個試驗，咱們能夠學到如何用$.getJSON，也能學到如何作一個接口讓別人跨域請求。