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

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

全部回覆(4)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!