其实还是很格式化的：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <style> body, input, select, button, h1 { font-size: 28px; line-height:1.7; } </style> </head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工新建</h1> <label>请输入员工姓名：</label> <input type="text" id="staffName" /><br> <label>请输入员工编号：</label> <input type="text" id="staffNumber" /><br> <label>请选择员工性别：</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位：</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> <script> document.getElementById("search").onclick = function() { var request = new XMLHttpRequest(); request.open("GET", "server.php?number=" + document.getElementById("keyword").value); request.send(); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("searchResult").innerHTML = request.responseText; } else { alert("发生错误：" + request.status); } } } } document.getElementById("save").onclick = function() { var request = new XMLHttpRequest(); request.open("POST", "server.php"); var data = "name=" + document.getElementById("staffName").value + "&number=" + document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value + "&job=" + document.getElementById("staffJob").value; request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText; } else { alert("发生错误：" + request.status); } } } } </script> </body> </html>
分析一下：
document.getElementById("save").onclick = function() { var request = new XMLHttpRequest(); request.open("POST", "server.php"); var data = "name=" + document.getElementById("staffName").value + "&number=" + document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value + "&job=" + document.getElementById("staffJob").value; request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText; } else { alert("发生错误：" + request.status); } } }
首先在id=save的元素上绑定了一个点击事件。
创建一个XMLHttpRequest对象。
设定提交方式为post，提交地址为server.php,省略一个默认为true的参数，true表示异步请求，false表示同步请求。
构造post数据。
设置Header，使得服务器识别将要传递的数据为post传递。相比之下，使用get方法直接在url中传递参数要快速一点。
调用send方法，将data发送到服务器。
监听onreadystatechange事件，并根据4和200两个状态码判定请求成功。进行其他操作。
通常我们将表单的数据用jquey的serialize()方法来将表单序列化。每一个要提交的数据必须有一个name属性。
当然我们有更稳定的方法：jquery。用jquery的.ajax方法。
示例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <style> body, input, select, button, h1 { font-size: 28px; line-height:1.7; } </style> </head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工新建</h1> <label>请输入员工姓名：</label> <input type="text" id="staffName" /><br> <label>请输入员工编号：</label> <input type="text" id="staffNumber" /><br> <label>请选择员工性别：</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位：</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script> <script> $(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(), dataType: "jsonp", jsonp: "callback", 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: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.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> </body> </html>
简单分析一下：
$("#save").click(function(){
$.ajax({
type: "POST",
url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.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);
},
});
});
在save按钮上绑定click方法,执行$.ajax()方法。
设置如下参数：type：post||get
url：
data：设置传递的参数
datatype：设置参数类型，可以不设置，有服务器自主解析
sucess：请求成功的回调函数
error：请求失败的回调函数