Ajax初级 json_encode

最新推荐文章于 2022-12-04 07:30:36 发布

power0405hf

最新推荐文章于 2022-12-04 07:30:36 发布

阅读量654

点赞数

分类专栏：前端 ajax 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/power0405hf/article/details/44873065

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

Ajax：Asynchronous JavaScript and XML

Ajax用来异步通信，用户不需要长长的等待。

实现也很简单，主要用到XMLHttpRequest对象

HTML代码：

<body>

<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>

</body>

 
 var  
 XMLHttp= 
 null 
 ;//兼容多种浏览器 

 
 try 
 { 

 
      
 XMLHttp= 
 new  
 ActiveXObject( 
 "Msxml2.XMLHTTP" 
 ); 

 
 } 
 catch 
 (e) {  

 
 try  
 {

 
          
 XMLHttp= 
 new  
 ActiveXObject( 
 "Microsoft.XMLHTTP" 
 ); 

}

}

 
 if  
 (XMLHttp== 
 null 
 ){ 

 
      
 XMLHttp= 
 new  
 XMLHttpRequest(); 

}

 
 function callServer(){
 var city=document.getElementById("city").value;
 var state=document.getElementById("state").value;
 if((city==null)||(city=="")) return;
 if((state==null)||(state=="")) return;
 var url="__APP__/Index/test2?city="+escape(city)+"&state="+escape(state);//这里用的thinkphp框架，一般是xx/yy/z.php
 xmlHttp.open("GET",url,true);
 xmlHttp.onreadystatechange=updatePage;
 xmlHttp.send(null);
  

}

 
 function updatePage(){
 if (xmlHttp.readyState==4) {
 if (xmlHttp.status==200){
 var response=xmlHttp.responseText;
 document.getElementById("zipCode").value=response; 

}

}

}

</script>

后台PHP：

public function test2(){

//获得来自 URL 的参数

$c=$_GET["city"];
$s=$_GET["state"];

//查找数组中的所有提示
if ((strlen($c) > 0)&&(strlen($s) > 0)){
$response = 112;
echo $response;
}

}

后台处理后的数据放到$response(这只是随便取的变量名，可以改的)里

然后前台的updatePage函数通过xmlHttp.responseText获取，就行啦~

如果要传数组，就要用json格式，比如：

$response=("1","2","3");

echo json_encode($response);

power0405hf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax初级 json_encode

Ajax：Asynchronous JavaScript and XMLAjax用来异步通信，用户不需要长长的等待。实现也很简单，主要用到XMLHttpRequest对象HTML代码：City: onChange="callServer();" />State: onChange="callServer();" />Zip Cod
复制链接

扫一扫

专栏目录