ajax 异步提交数据，实现无刷新提交表单
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span> 用户名：<input type="text" name="name" /> <span id="span"></span></span><br />
<div id="div">
<input type="button" value="点击" onclick="ajax()" />
</div>
<span> 用户名：<input type="text" name="name" /> <span id="span2"></span></span><br />
<div id="div2">
<input type="button" value="点击" onclick="ajax2()" />
</div> <script> function ajax(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else
xmlHttp = ActiveXObject("Microsoft.XMLHTTP"); xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var inner =xmlHttp.responseText;
var obj = eval(inner);
// alert(obj);
document.getElementById("span").innerHTML = obj[0].first;
}
} xmlHttp.open("GET","ch.json",true);
xmlHttp.send();
} function ajax2(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else
xmlHttp = ActiveXObject("Microsoft.XMLHTTP"); xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var inner =xmlHttp.responseText;
var obj = eval(inner);
document.getElementById("span2").innerHTML = obj[0].second;
}
} xmlHttp.open("GET","ch.json",true);
xmlHttp.send();
}
</script>
</body>
</html>
ch.json
{
[
{"first":"用户名可以用","second":"用户名不可以用"}
]
}
结果图：
