AJAX請求數(shù)據(jù)-demo資料

AJAX請求數(shù)據(jù)_demo本篇列舉三個 demo:1、用ajax請求json格式數(shù)據(jù)(JavaScript)2、用ajax請求json格式數(shù)據(jù)(jQuery)3、用jsonp請求json格式數(shù)據(jù)(Jquery)頁面只有實現(xiàn)兩個功能（用頁面布局如下：<h1>員工查詢</h1>

get

請求-獲取數(shù)據(jù)

& 用

post

請求-設(shè)置修改數(shù)據(jù)）三個

demo<label>請輸入員工編號： </label><inputtype="text"id="keyword"/><buttonid="search">查詢</button><pid="searchResult"></p><h1>員工新建</h1><label>請輸入員工姓名： </label><inputtype="text"id="staffName"/><br><label>請輸入員工編號： </label><inputtype="text"id="staffNumber"/><br><label>請選擇員工性別： </label><selectid="staffSex"><option>女</option><option>男</option></select><br><label>請輸入員工職位： </label><inputtype="text"id="staffJob"/><br><buttonid="save">保存</button><pid="createResult"></p>其中demo1和demo2請求的一個 php數(shù)據(jù)，PHP文件如下:serverjson.php:<?php//設(shè)置頁面內(nèi)容是 html編碼格式是 utf-8//header("Content-Type:text/plain;charset=utf-8");// 純文本格式header("Content-Type:application/json;charset=utf-8");//json 字符串//header("Content-Type:text/xml;charset=utf-8");//header("Content-Type:text/html;charset=utf-8");//header("Content-Type:application/javascript;charset=utf-8");//定義一個多維數(shù)組，包含員工的信息，每條員工信息為一個數(shù)組$staff=array(array("name"=>"array("name"=>"array("name"=>"

洪七郭靖黃蓉

","number"=>"101","sex"=>"","number"=>"102","sex"=>"","number"=>"103","sex"=>"

男","job"=>"總經(jīng)理"),男","job"=>"開發(fā)工程師女","job"=>"產(chǎn)品經(jīng)理")

"),);//判斷如果是

get請求，則進行搜索；如果是

POST

請求，則進行新建//$_SERVER

是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用

global

關(guān)鍵字//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法if($_SERVER["REQUEST_METHOD"]=="GET"){search();}elseif($_SERVER["REQUEST_METHOD"]=="POST"){create();}//通過員工編號搜索員工functionsearch(){//檢查是否有員工編號的參數(shù)isset檢測變量是否設(shè)置；empty判斷值為否為空//超全局變量 $_GET和$_POST用于收集表單數(shù)據(jù)if(!isset($_GET["number"])||empty($_GET["number"])){echo'{"success":false,"msg":"參數(shù)錯誤"}';return;}//函數(shù)之外聲明的變量擁有 Global 作用域，只能在函數(shù)以外進行訪問。//global 關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量global$staff;//獲取number參數(shù)$number=$_GET["number"];$result='{"success":false,"msg":"沒有找到員工。 "}';//遍歷$staff多維數(shù)組，查找 key值為number的員工是否存在，如果存在，則修改返回結(jié)果foreach($staffas$value){if($value["number"]==$number){$result='{"success":true,"msg":" 員工編號：'.$value["number"].'，員工姓名：'.$value["name"].'，員工性別：'.$value["sex"].'，員工職位：'.$value["job"].'"}';break;}}echo$result;}//創(chuàng)建員工functioncreate(){//判斷信息是否填寫完全if(!isset($_POST["name"])||empty($_POST["name"])!isset($_POST["number"])||empty($_POST["number"])!isset($_POST["sex"])||empty($_POST["sex"])!isset($_POST["job"])||empty($_POST["job"])){echo'{"success":false,"msg":"參數(shù)錯誤，員工信息填寫不全"}';return;}//TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫//提示保存成功echo'{"success":true,"msg":"員工：'.$_POST["name"].' 信息保存成功！ "}';}?>demo1、用ajax請求json格式數(shù)據(jù)(javascript)ajax訪問serverjson.PHP的JS代碼：<script>//get請求-查詢數(shù)據(jù)varsearch=document.getElementById('search');varkeyword=document.getElementById('keyword');varsearchResult=document.getElementById('searchResult');search.onclick=function(){//1、創(chuàng)建XMLHttpRequest 對象varxhr=newXMLHttpRequest();// 非IE5、6//2、打開與服務(wù)器的鏈接xhr.open('get','serverjson.php?number='+keyword.value,true);//3、發(fā)送請求xhr.send();//4、響應(yīng)請求xhr.onreadystatechange=function(){if(xhr.readyState===4){//請求已完成if(xhr.status===200){////json字符創(chuàng)轉(zhuǎn)化為 json對象vardata=eval('('+xhr.responseText+')');if(data.success){searchResult.innerHTML="找到員工:"+data.msg;}else{searchResult.innerHTML="出現(xiàn)錯誤:"+data.msg;}}else{alert('發(fā)生錯誤'+xhr.status);}}}}//post請求-修改數(shù)據(jù)varsave=document.getElementById('save');varstaffName=document.getElementById('staffName');varstaffNumber=document.getElementById('staffNumber');varstaffSex=document.getElementById('staffSex');varstaffJob=document.getElementById('staffJob');varcreateResult=document.getElementById('createResult');save.onclick=function(){//1、創(chuàng)建XMLHttpRequest 對象varxhr=newXMLHttpRequest();// 非IE5、6//2、打開與服務(wù)器的鏈接xhr.open('post','serverjson.php',true);//post請求添加 http頭部信息xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");vardata='name='+staffName.value+'&number='+staffNumber.value+'&sex='+staffSex.value+'&job='+staffJob.value;//3、發(fā)送請求-send中傳入字符串xhr.send(data);//4、響應(yīng)請求xhr.onreadystatechange=function(){if(xhr.readyState===4){//請求已完成if(xhr.status===200){//vardata=eval('('+xhr.responseText+')')if(data.success){createResult.innerHTML="成功:"+data.msg;}else{createResult.innerHTML="錯誤:"+data.msg;}}else{alert('發(fā)生錯誤'+xhr.status);}}}}</script>demo2、用ajax請求json格式數(shù)據(jù)(Jquery)Jquery實現(xiàn)AJAX數(shù)據(jù)請求：$(document).ready(function(){$("#search").click(function(){$.ajax({type:"GET",url:"serverjson.php?number="+$("#keyword").val(),success:function(data){if(data.success){$("#searchResult").html(data.msg);}else{$("#searchResult").html("出現(xiàn)錯誤："+data.msg);}},error:function(jqXHR){alert("發(fā)生錯誤："+jqXHR.status);},});});$("#save").click(function(){$.ajax({type:"POST",url:"serverjson.php",data:{name:$("#staffName").val(),number:$("#staffNumber").val(),sex:$("#staffSex").val(),job:$("#staffJob").val()},dataType:"json",success:function(data){if(data.success){$("#createResult").html(data.msg);}else{$("#createResult").html("出現(xiàn)錯誤："+data.msg);}},error:function(jqXHR){alert("發(fā)生錯誤："+jqXHR.status);},});});});</script>demo3、用jsonp請求json格式數(shù)據(jù)(Jquery)其中demo3請求的一個 php數(shù)據(jù)，PHP文件如下:serverjsonp.php:<?phpheader("Content-Type:application/json;charset=utf-8");//定義一個多維數(shù)組，包含員工的信息，每條員工信息為一個數(shù)組$staff=array(array("name"=>"洪七","number"=>"101","sex"=>"array("name"=>"郭靖","number"=>"102","sex"=>"array("name"=>"黃蓉","number"=>"103","sex"=>");

男","job"=>"總經(jīng)理"),男","job"=>"開發(fā)工程師"),女","job"=>"產(chǎn)品經(jīng)理")//判斷如果是 get請求，則進行搜索；如果是 POST請求，則進行新建//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用 global關(guān)鍵字//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法if($_SERVER["REQUEST_METHOD"]=="GET"){search();}elseif($_SERVER["REQUEST_METHOD"]=="POST"){create();}//通過員工編號搜索員工functionsearch(){$jsonp=$_GET["callback"];//檢查是否有員工編號的參數(shù)//isset檢測變量是否設(shè)置； empty判斷值為否為空//超全局變量 $_GET和$_POST用于收集表單數(shù)據(jù)if(!isset($_GET["number"])||empty($_GET["number"])){echo$jsonp.'({"success":false,"msg":"參數(shù)錯誤"})';return;}//函數(shù)之外聲明的變量擁有 Global 作用域，只能在函數(shù)以外進行訪問。//global 關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量global$staff;//獲取number參數(shù)$number=$_GET["number"];$result=$jsonp.'({"success":false,"msg":" 沒有找到員工。 "})';//遍歷$staff多維數(shù)組，查找 key值為number的員工是否存在，如果存在，則修改返回結(jié)果foreach($staffas$value){if($value["number"]==$number){$result = **$jsonp . '({"success":true,"msg":" 找到員工：員工編號：'.$value["number"].'，員工姓名：'.$value["name"].'，員工性別：'.$value["sex"].'，員工職位：'.$value["job"].'"})'**;break;}}echo$result;}//創(chuàng)建員工functioncreate(){//判斷信息是否填寫完全if(!isset($_POST["name"])||empty($_POST["name"])!isset($_POST["number"])||empty($_POST["number"])!isset($_POST["sex"])||empty($_POST["sex"])!isset($_POST["job"])||empty($_POST["job"])){echo'{"success":false,"msg":"參數(shù)錯誤，員工信息填寫不全"}';return;}//TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫//提示保存成功echo'{"success":true,"msg":"員工：'.$_POST["name"].' 信息保存成功！ "}';}?>Jquery實現(xiàn)-jsonp數(shù)據(jù)請求：$(document).read