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

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

membalas semua(4)
小葫芦

不需要form了,监听提交按钮的点击事件就可以了,试试jquery,能帮你更快的完成这个功能

左手右手慢动作

不用submit,通过ajax提交。后端返回你需要的字段即可

大家讲道理

先导个jq。

function xxxAction() {
    var url = ........;
    $.ajax({
        "url":url,
        "dataType":"text",
        "type":"post",
        "data":{"jsonData":JSON.stringify(getData())},
        "success":function(返回值){
          xxxxx;
        }
    });
}
大家讲道理

楼上有好几种替代方案,我呢,给你一个在你基础上改进版本:

<form method="post" action="basicform.php" onsubmit="return save()">
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 />

<button type="submit">submit</button>
</form>
<p id="output"></p>
var out = document.getElementById('output');
function save(){
  var obj= new XMLHttpRequest();  
  var params = [],
      keys = ['name','email', 'event_id', 'number_of_tickets'];
  for (var idx in keys) {
      params.push(keys[idx] + '=' + document.getElementById(keys[idx]).value)
  }
   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.error || response.content) + "</p>";
  } else {
      out.innerHTML = '给我一个吻!';
  }
 };
 obj.send(params.join('&'));
 return false;
}

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!