在做一个类似订票的网页系统。下面是模拟的H5表单
<form method="get" action="basicform.php">
Name: <input type="text" id="name" name="name" size="25" /> <br />
Email: <input type="text" id="email" name="email" size="25" /> <br />
Event ID: <input type="text" id="event_id" name="event_id" size="25" /> <br />
Number of Tickets: <input type="text" id="number_of_tickets" name="number_of_tickets" size="25" /> <br />
<input type="submit" value="submit" />
</form>
打算在点击提交以后返回订票成功与否的相关信息,比如
{"status":"ok"} // when request satisfied
{"status":"partial", "reserved": n} // when request is partially satisfied, where n is a number of reserved tickets.
{"status":"failed"} // when there are no tikets available.
在服务端模拟好了相关数据(Server-side URL: http://guimon.info/js/tickets...),但是卡在怎么通过ajax提交POST的数据并且服务端也会返回诸如上面JSON的response(JSON相关数据也都部署完了在 http://guimon.info/js/events....)。
想要的参数是
name
event_id
number_of_tickets
谢谢各位大神
代码如下:
<button id="load">Load</button>
<p id="output"></p>
<script>
document.getElementById('load').addEventListener('click', load);
var out = document.getElementById('output');
function load(){
var obj= new XMLHttpRequest();
var params = "name=username";
obj.open("POST", /*"ajax_data.html"*/"http://guimon.info/js/tickets.php", true);
obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//obj.setRequestHeader("Content-length", params.length);
//obj.setRequestHeader("Connection", "close");
obj.onload = function (){
if(obj.status == 200 ){
var response = JSON.parse(obj.responseText);
out.innerHTML += "<p>" + response.content + "</p>";
}
};
obj.send(params);
}
</script>
不需要form了,监听提交按钮的点击事件就可以了,试试jquery,能帮你更快的完成这个功能
不用
submit
,通过ajax提交。后端返回你需要的字段即可先导个jq。
楼上有好几种替代方案,我呢,给你一个在你基础上改进版本: