javascript - 怎么通过ajax提交(POST)表单数据并且返回(GET)服务器信息
伊谢尔伦
伊谢尔伦 2017-04-11 13:06:52
0
4
256

在做一个类似订票的网页系统。下面是模拟的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

email

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>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all(4)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!