javascript - 怎么通过ajax提交（POST）表单数据并且返回（GET）服务器信息-PHP 중국어 네트워크 Q&A

기사 주제 학습 다운로드 Q&A 프로그래밍 사전 게임 최근 업데이트

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - 怎么通过ajax提交（POST）表单数据并且返回（GET）服务器信息

伊谢尔伦 2017-04-11 13:06:52

304

在做一个类似订票的网页系统。下面是模拟的H5表单

 Name:  
 Email:  
 Event ID:  
 Number of Tickets:

打算在点击提交以后返回订票成功与否的相关信息，比如
{"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

谢谢各位大神

代码如下：

伊谢尔伦

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

모든 응답 (4)

小葫芦2017-04-11 13:08:52 4층

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

좋다+0

답글 추가

左手右手慢动作2017-04-11 13:08:52 3층

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

좋다+0

답글 추가

大家讲道理2017-04-11 13:08:52 2층

先导个jq。

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

좋다+0

답글 추가

大家讲道理2017-04-11 13:08:52 1층

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

 Name:  
 Email:  
 Event ID:  
 Number of Tickets:

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 += "" + (response.error || response.content) + "
"; } else { out.innerHTML = '给我一个吻！'; } }; obj.send(params.join('&')); return false; }