通過jquery的$.getJSON做一個(gè)跨域ajax請求試驗(yàn)
更新時(shí)間：2011年05月03日 23:00:35 作者：
jquery提供了$.getJSON的方法，讓我們可以實(shí)現(xiàn)跨域ajax請求，但jqueryAPI上的內(nèi)容實(shí)在太少，如何用$.getJSON，請求網(wǎng)站應(yīng)該返回怎樣的數(shù)據(jù)庫才能讓$.getJSON獲取到，下面我就用一個(gè)實(shí)際例子來說明下。
（主要是留個(gè)備用，怕以后再用到自己卻忘記了，所以沒有太多的解釋，實(shí)在看不明白的話，照著我的代碼，你也試一個(gè)吧）
我后端是用php的，以下代碼主要實(shí)現(xiàn)的一個(gè)功能就是提供一個(gè)預(yù)約登記的接口，需要傳入的數(shù)據(jù)分別有：用戶姓名、聯(lián)系電話和地址
/*預(yù)約登記 執(zhí)行 接口*/
/*預(yù)約登記 執(zhí)行 接口*/
case "yuyue_interface":
$name = trim($_GET['name']);
$phone = trim($_GET['phone']);
$addr = trim($_GET['addr']);
$dt = date("Y-m-d H:i:s");
$cb = $_GET['callback'];
if($name == "" || $name == NULL){
echo $cb."({code:".json_encode(1)."})";
}elseif($phone == "" || $phone == NULL){
echo $cb."({code:".json_encode(2)."})";
}elseif($addr == "" || $addr == NULL){
echo $cb."({code:".json_encode(3)."})";
}else{
$db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)");
echo $cb."({code:".json_encode(0)."})";
}
exit;
break;
接著就是前端的處理了
$(document).ready(function(){
//以下3個(gè)為預(yù)約登記需要的參數(shù)
var name = "name"; //varchar類型，長度最多為8位（4個(gè)漢字）
var phone = "phone"; //varchar類型，長度為11位
var addr = "addr"; //varchar類型，長度最多為500位（250個(gè)漢字）
$.getJSON("http://請求網(wǎng)站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
if(data.code==1){
//自定義代碼
alert("姓名不能為空");
}else if(data.code==2){
//自定義代碼
alert("手機(jī)不能為空");
}else if(data.code==3){
//自定義代碼
alert("所在單位不能為空");
}else{
//自定義代碼
alert("預(yù)約成功");
}
});
});
需要注意的是，在后端php代碼里，必須把傳遞進(jìn)來的“ &callback=? ”也輸出來，如：
$cb = $_GET['callback'];
echo $cb."({code:".json_encode(4)."})";
以上就是一個(gè)簡單的$.getJSON試驗(yàn)，通過這個(gè)試驗(yàn)，我們可以學(xué)到如何用$.getJSON，也能學(xué)到如何做一個(gè)接口讓別人跨域請求。
如果有疑問，可以在下面提出來，如果我哪里寫錯(cuò)了，也請幫我指出來。
我后端是用php的，以下代碼主要實(shí)現(xiàn)的一個(gè)功能就是提供一個(gè)預(yù)約登記的接口，需要傳入的數(shù)據(jù)分別有：用戶姓名、聯(lián)系電話和地址
/*預(yù)約登記 執(zhí)行 接口*/
復(fù)制代碼 代碼如下:
/*預(yù)約登記 執(zhí)行 接口*/
case "yuyue_interface":
$name = trim($_GET['name']);
$phone = trim($_GET['phone']);
$addr = trim($_GET['addr']);
$dt = date("Y-m-d H:i:s");
$cb = $_GET['callback'];
if($name == "" || $name == NULL){
echo $cb."({code:".json_encode(1)."})";
}elseif($phone == "" || $phone == NULL){
echo $cb."({code:".json_encode(2)."})";
}elseif($addr == "" || $addr == NULL){
echo $cb."({code:".json_encode(3)."})";
}else{
$db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)");
echo $cb."({code:".json_encode(0)."})";
}
exit;
break;
接著就是前端的處理了
復(fù)制代碼 代碼如下:
$(document).ready(function(){
//以下3個(gè)為預(yù)約登記需要的參數(shù)
var name = "name"; //varchar類型，長度最多為8位（4個(gè)漢字）
var phone = "phone"; //varchar類型，長度為11位
var addr = "addr"; //varchar類型，長度最多為500位（250個(gè)漢字）
$.getJSON("http://請求網(wǎng)站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
if(data.code==1){
//自定義代碼
alert("姓名不能為空");
}else if(data.code==2){
//自定義代碼
alert("手機(jī)不能為空");
}else if(data.code==3){
//自定義代碼
alert("所在單位不能為空");
}else{
//自定義代碼
alert("預(yù)約成功");
}
});
});
需要注意的是，在后端php代碼里，必須把傳遞進(jìn)來的“ &callback=? ”也輸出來，如：
復(fù)制代碼 代碼如下:
$cb = $_GET['callback'];
echo $cb."({code:".json_encode(4)."})";
以上就是一個(gè)簡單的$.getJSON試驗(yàn)，通過這個(gè)試驗(yàn)，我們可以學(xué)到如何用$.getJSON，也能學(xué)到如何做一個(gè)接口讓別人跨域請求。
如果有疑問，可以在下面提出來，如果我哪里寫錯(cuò)了，也請幫我指出來。
相關(guān)文章
這篇文章主要介紹了jQuery trigger()方法用法介紹,trigger()方法可以觸發(fā)匹配元素上指定類型的事件,本文講解它的使用語法,需要的朋友可以參考下2015-01-01
jquery中常用的SET和GET$(”#msg”).html循環(huán)介紹
jquery中常用的SET和GET$(”#msg”).html循環(huán)想必大家并不陌生吧，本文整理了一些，感興趣的朋友可以參考下2013-10-10
jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
jquery實(shí)現(xiàn)隱藏顯示層動(dòng)畫效果、仿新浪字符動(dòng)態(tài)輸入、tab效果等等，以下為所有代碼，感興趣的朋友可以練練手哈，希望對大家學(xué)習(xí)有所幫助2013-07-07
jquery實(shí)現(xiàn)手機(jī)端單店鋪購物車結(jié)算刪除功能
本文主要介紹了js實(shí)現(xiàn)手機(jī)端單店鋪購物車結(jié)算刪除功能的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)消息彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
jquery動(dòng)態(tài)添加元素事件失效問題解決方法
當(dāng)使用腳本動(dòng)態(tài)添加元素xxx時(shí)，但事件失效，最后使用jquery中on方法解決腳本動(dòng)態(tài)添加元素,需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)為table表格動(dòng)態(tài)添加或刪除tr功能,結(jié)合實(shí)例形式分析了jQuery針對table表格行動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例代碼
這篇文章介紹了Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例，有需要的朋友可以參考一下2013-07-07
前些天記錄了java中for循環(huán)取map，發(fā)現(xiàn)用jquery的each一樣可以取map（我稱之為js的map，不要較勁），且順序和map中順序一致。2011-02-02