您的位置：首页 > Web前端 > JavaScript

客户端POST提交、服务器返回json格式数据的demo

2014-10-05 09:56 671 查看

//register.php
<html>
<head>
<title>ajax用户注册</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
font-family: "Microsoft JhengHei";
}
label{
font-weight: bolder;
font-size: 14px;
}
input.check{
border-width: 0;
color: red;
font-family: "Microsoft JhengHei";
font-weight: bolder;
}
</style>

<script type="text/javascript">

function getXmlHttpObject(){
var xmHttpRequset;

if(window.ActiveXObject){
//window.alert("ie")
xmlHttpRequset = new ActiveXObject("Microsoft.XMLHTTP");
}else{
//window.alert("ff")
xmlHttpRequset = new XMLHttpRequest();
}

return xmlHttpRequset;
}

var myXmlHttpRequset = getXmlHttpObject(); //申明myXmlHttpRequset为全局变量

function checkName(){
if(myXmlHttpRequset){
var myurl = "/ajax/learn/registerpro.php";
var data = "username=" + $("username").value;
myXmlHttpRequset.open("post", myurl, true);
myXmlHttpRequset.onreadystatechange = solve;
myXmlHttpRequset.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myXmlHttpRequset.send(data);
}else{
//window.alert("error");
}

}

function $(id){
return document.getElementById(id);
}

//回调函数
function solve(){
if(myXmlHttpRequset.readyState == 4){
var mes = myXmlHttpRequset.responseText;
var mes_obj = eval("(" + mes + ")");
$('res').value = mes_obj.res;
}
}
</script>

</head>
<body>
<form action="registerpro.php" method="post">
<label>账号</label>
<input type="text" name="username" id="username" />
<input type="button" name="check" id="check" value="检查用户名" onclick="checkName()"/>
<input class="check" type="text" id="res" readonly="readonly"/>
</br>
<label>密码</label>
<input type="text" name="password" id="password" />
<input type="submit" name="submit" id="submit"/>
</form>
</body>
</html>

//registerpro.php
header("Content-Type: text/html; charset=utf-8");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

$username = $_POST['username'];
$info = "";
if($username == "lisheng"){
$info = '{"res": "用户名不可用"}';
}else{
$info = '{"res": "用户名可用"}';
}

echo $info;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax javascript php xmlhttprequest

相关文章推荐

新的分享

章节导航