FormData form data Object, which is a new API in HTML5, he can use form objects to do parameters, automatically package the form's data, when Ajax is sending data, send the form data within the FormData to the backend
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Script> functionfd () {varFDate=document.getElementById ('FDate'); varFD= NewFormData (fdate); varXHR= NewXMLHttpRequest (); Xhr.open ('Post','10.php',true); Xhr.send (FD); Xhr.onreadystatechange= function(){ if( This. ReadyState== 4) {document.getElementById ('desc'). InnerHTML= This. responsetext; } } }</Script><Body> <formID= "FDate" >User:<inputtype= "text"name= "User"> <BR><BR>Age :<inputtype= "text"name= "Age"> <BR><BR>Sex:<inputtype= "text"name= "Sex"> <BR><BR>QQ:<inputtype= "text"name= "QQ"> <BR><BR> <inputtype= "button"value= "Go"onclick= "FD ();"> </form> <PID= "desc"></P></Body></HTML>
The effect is as follows:
This is much simpler than the traditional stitching method, and of course he has another usage as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Script> functionfd () {varFDate=document.getElementById ('FDate'); varFD= NewFormData (fdate); varFD2= NewFormData (); varXHR= NewXMLHttpRequest (); Xhr.open ('Post','10.php',true); //Xhr.send (FD);Fd2.append ('User','Leigood'); Fd2.append (' Age',' -'); Xhr.send (FD2); Xhr.onreadystatechange= function(){ if( This. ReadyState== 4) {document.getElementById ('desc'). InnerHTML= This. responsetext; } } }</Script><Body> <formID= "FDate" >User:<inputtype= "text"name= "User"> <BR><BR>Age :<inputtype= "text"name= "Age"> <BR><BR>Sex:<inputtype= "text"name= "Sex"> <BR><BR>QQ:<inputtype= "text"name= "QQ"> <BR><BR> <inputtype= "button"value= "Go"onclick= "FD ();"> </form> <PID= "desc"></P></Body></HTML>
The effect is as follows:
AJAX-----The new API---FormData in 13HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
