AJAX请求数据-demo资料

AJAX请求数据_demo本篇列举三个 demo:1、用ajax请求json格式数据(JavaScript)2、用ajax请求json格式数据(jQuery)3、用jsonp请求json格式数据(Jquery)页面只有实现两个功能（用页面布局如下：<h1>员工查询</h1>

get

请求-获取数据

& 用

post

请求-设置修改数据）三个

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数据，PHP文件如下:serverjson.php:<?php//设置页面内容是 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");//定义一个多维数组，包含员工的信息，每条员工信息为一个数组$staff=array(array("name"=>"array("name"=>"array("name"=>"

洪七郭靖黄蓉

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

男","job"=>"总经理"),男","job"=>"开发工程师女","job"=>"产品经理")

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

get请求，则进行搜索；如果是

POST

请求，则进行新建//$_SERVER

是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用

global

关键字//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法if($_SERVER["REQUEST_METHOD"]=="GET"){search();}elseif($_SERVER["REQUEST_METHOD"]=="POST"){create();}//通过员工编号搜索员工functionsearch(){//检查是否有员工编号的参数isset检测变量是否设置；empty判断值为否为空//超全局变量 $_GET和$_POST用于收集表单数据if(!isset($_GET["number"])||empty($_GET["number"])){echo'{"success":false,"msg":"参数错误"}';return;}//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。//global 关键词用于访问函数内的全局变量global$staff;//获取number参数$number=$_GET["number"];$result='{"success":false,"msg":"没有找到员工。 "}';//遍历$staff多维数组，查找 key值为number的员工是否存在，如果存在，则修改返回结果foreach($staffas$value){if($value["number"]==$number){$result='{"success":true,"msg":" 员工编号：'.$value["number"].'，员工姓名：'.$value["name"].'，员工性别：'.$value["sex"].'，员工职位：'.$value["job"].'"}';break;}}echo$result;}//创建员工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":"参数错误，员工信息填写不全"}';return;}//TODO: 获取POST表单数据并保存到数据库//提示保存成功echo'{"success":true,"msg":"员工：'.$_POST["name"].' 信息保存成功！ "}';}?>demo1、用ajax请求json格式数据(javascript)ajax访问serverjson.PHP的JS代码：<script>//get请求-查询数据varsearch=document.getElementById('search');varkeyword=document.getElementById('keyword');varsearchResult=document.getElementById('searchResult');search.onclick=function(){//1、创建XMLHttpRequest 对象varxhr=newXMLHttpRequest();// 非IE5、6//2、打开与服务器的链接xhr.open('get','serverjson.php?number='+keyword.value,true);//3、发送请求xhr.send();//4、响应请求xhr.onreadystatechange=function(){if(xhr.readyState===4){//请求已完成if(xhr.status===200){////json字符创转化为 json对象vardata=eval('('+xhr.responseText+')');if(data.success){searchResult.innerHTML="找到员工:"+data.msg;}else{searchResult.innerHTML="出现错误:"+data.msg;}}else{alert('发生错误'+xhr.status);}}}}//post请求-修改数据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、创建XMLHttpRequest 对象varxhr=newXMLHttpRequest();// 非IE5、6//2、打开与服务器的链接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、发送请求-send中传入字符串xhr.send(data);//4、响应请求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('发生错误'+xhr.status);}}}}</script>demo2、用ajax请求json格式数据(Jquery)Jquery实现AJAX数据请求：$(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("出现错误："+data.msg);}},error:function(jqXHR){alert("发生错误："+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("出现错误："+data.msg);}},error:function(jqXHR){alert("发生错误："+jqXHR.status);},});});});</script>demo3、用jsonp请求json格式数据(Jquery)其中demo3请求的一个 php数据，PHP文件如下:serverjsonp.php:<?phpheader("Content-Type:application/json;charset=utf-8");//定义一个多维数组，包含员工的信息，每条员工信息为一个数组$staff=array(array("name"=>"洪七","number"=>"101","sex"=>"array("name"=>"郭靖","number"=>"102","sex"=>"array("name"=>"黄蓉","number"=>"103","sex"=>");

男","job"=>"总经理"),男","job"=>"开发工程师"),女","job"=>"产品经理")//判断如果是 get请求，则进行搜索；如果是 POST请求，则进行新建//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用 global关键字//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法if($_SERVER["REQUEST_METHOD"]=="GET"){search();}elseif($_SERVER["REQUEST_METHOD"]=="POST"){create();}//通过员工编号搜索员工functionsearch(){$jsonp=$_GET["callback"];//检查是否有员工编号的参数//isset检测变量是否设置； empty判断值为否为空//超全局变量 $_GET和$_POST用于收集表单数据if(!isset($_GET["number"])||empty($_GET["number"])){echo$jsonp.'({"success":false,"msg":"参数错误"})';return;}//函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。//global 关键词用于访问函数内的全局变量global$staff;//获取number参数$number=$_GET["number"];$result=$jsonp.'({"success":false,"msg":" 没有找到员工。 "})';//遍历$staff多维数组，查找 key值为number的员工是否存在，如果存在，则修改返回结果foreach($staffas$value){if($value["number"]==$number){$result = **$jsonp . '({"success":true,"msg":" 找到员工：员工编号：'.$value["number"].'，员工姓名：'.$value["name"].'，员工性别：'.$value["sex"].'，员工职位：'.$value["job"].'"})'**;break;}}echo$result;}//创建员工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":"参数错误，员工信息填写不全"}';return;}//TODO: 获取POST表单数据并保存到数据库//提示保存成功echo'{"success":true,"msg":"员工：'.$_POST["name"].' 信息保存成功！ "}';}?>Jquery实现-jsonp数据请求：$(document).read