您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
php与ajax局部数据交换实例(用户名验证)-post方式（及post方式乱码解决）
发布时间：2015-04-16 21:15:39编辑：雪饮阅读（）
前端页面代码（index2-post.php）:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function xmlhttprequestobject(){
//一号线创建ajax对象
var xmlhttprequest='';
if(window.ActiveXObject){
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlhttprequest=new XMLHttpRequest();
}
return xmlhttprequest;
}
//上面的方法创建了xmlhttprequest对象
function getid(id){
return document.getElementById(id)
}
//预置一个全局空对象
var myxmlhttpquestobject="";
function checkname(){
myxmlhttpquestobject=xmlhttprequestobject();
if(myxmlhttpquestobject){
//如果ajax对象创建成功，我们就打开该对象的传输协议准备传输
//声明ajax要传递参数以及要接收参数的文件路径
var url="chuli-post.php";
//二号线，用指定的url以get的方式打开请求，并且开启异步
var data="yhm="+getid("username").value;
myxmlhttpquestobject.open("post",url,true);
//三号线，用回调函数来处理服务器端返回信息
myxmlhttpquestobject.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
myxmlhttpquestobject.onreadystatechange=huidiaohanshu
//get方式的请求发送，在send（）方法中直接填入null即可，若是post方式则需要填入具体值
myxmlhttpquestobject.send(data);
}
else{
alert("创建对象失败");
}
}
function huidiaohanshu(){
//ie中状态码是4次，而360这种webkit内核的则是3次
//alert("处理函数被调用:"+myxmlhttpquestobject.readyState);
if(myxmlhttpquestobject.readyState==4){
//alert("服务器返回了："+myxmlhttpquestobject.responseText);
getid("tishi").innerHTML=myxmlhttpquestobject.responseText;
/*注意：如果使用的是get方式发送请求，那么当你的表单元素值不发生变化时是不会真的发送请求的，而是从缓存取出数据，基于此解决方法有两种.
一：直接在发送的url参数上新增一个参数，其值是可变的，例如获取当前时间
*/
}
}
</script>
</head>
<body>
<h1>表单1</h1>
<form id="bd1">
用户名：<input type="text" id="username" onkeyup="checkname();"><div id="tishi"></div><br/>
密码：<input type="text" id="password"><br/>
<input type="button" value="提交" onclick="checkname();">
</form>
<br/>
<h1>表单2</h1>
<form id="bd2">
用户名：<input type="text" id="username2"><br/>
密码：<input type="text" id="password2">
</form>
</body>
</html>
关键字词：php与ajax,post方式乱码,个人博客