Input data to server Ajax: 1. use Dom to obtain the form value input (F1) 2. use formdata to send Ajax data (F2) (no form, which uses the append () method to add data refer to F3)
<Form ID = "Reg"> User name: <input type = "text" id = "username" name = "username"/> <br/> password: <input type = "text" id = "userpwd" name = "userpwd"/> <br/> Email: <input type = "text" id = "useremail" name = "useremail"/> <br/> <input type = "button" value = "register" onclick = "F1 () "/> </form> <SCRIPT type =" text/JavaScript "> // Ajax function F1 () {// DOM technology can be used to collect form information var name = document. getelementbyid ('username '). value; var Pwd = document. getelementbyid ('userpwd '). value; var email = document. getelementbyid ('useremail '). value; var data_str = "name =" + name + "& Pwd =" + PWD + "& Email =" + email; var xhr = new XMLHttpRequest (); xhr. open ('post ','. /03. PHP '); xhr. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); xhr. send (data_str);} function F2 () {// ① process form forms using advanced methods (New HTML5 standard, not supported by IE) var Reg = document. getelementbyid ('reg '); // ② create a form data object formdata () // create a formdata form data object, store the form information in the form var FD = new formdata (REG); // Reg is the form Element Node object var xhr = new XMLHttpRequest (); xhr. onreadystatechange = function () {If (xhr. readystate = 4 & xhr. status = 200) {alert (xhr. responsetext) ;}} xhr. open ('post ','. /03. PHP '); // ③ transmits a form data object to the server // ④ post xhr when Ajax is enabled. send (FD);} // No form to collect data [3] function F3 () {// No form Element Node object var FD = new formdata (); vaR name = document. getelementbyid ('username '). value; var email = "[email protected]"; var Pwd = "123456"; // fill the above data into the FD object FD. append ('name', name); FD. append ('email ', email); FD. append ('pwd', PWD); var xhr = new XMLHttpRequest (); xhr. onreadystatechange = function () {If (xhr. readystate = 4 & xhr. status = 200) {alert (xhr. responsetext) ;}} xhr. open ('post ','. /03. PHP '); xhr. send (FD) ;}</SCRIPT>