JavaScript implements AJAX to send form data

Front-end style:

    <style>        . model{            fixed;            top:0px;            left:0px;            bottom:0px;            right:0px;            Background-color:white;        }        . hide{            display:none;        }     </style>

View Code

Front-end HTML code:

<div><a onclick="show_form ();"> Add </a></div><divclass="Model Hide"> <form method="Post"Id="Add"> <input type="text"Name="username"Placeholder="username"> <input type="text"Name=" Age"Placeholder=" Age"> <input type="Radio"Name="Gender"Value="1" checked>male<input type="Radio"Name="Gender"Value="0">female<SelectName="class">            {% forClsinchClasses%}                <option value="{{cls.id}}">{{CLS}}</option>            {% ENDFOR%}        </Select> <input type="Button"onclick="Add_stu ();"Value="Add"> </form></div><div> <table border="1"> <thead> <tr> <th>ID</th> <th> name </th&                Gt <th> age </th> <th> sex </th> <th> class </th> <t h> edit </th> </tr> </thead> <tbody>            {% forRowinchStudents%}                <tr><td>{{row.id}}</td> <td>{{row.username}}</td> <td>{{row.age}}</td> <td>                        {%ifRow.gender%} male {%Else%} female {% ENDIF%}                    </td> <td>{{row.cls}}</td> <td><a onclick="Xhrpostrequest (this);"> Delete </a>|<a href="/edit_student.html?nid={{Row.id}}"> Edit </a></td> </tr>            {% ENDFOR%}        </tbody> </table></div>

Related JS code: show_form

    function Show_form () {        document.getelementsbyclassname ("model") [ 0 ' Model ' ;    }

Ajax Send:

function getxhr () {if(XMLHttpRequest) {varXh =NewXMLHttpRequest (); }Else{Xh=NewActiveXObject ('Microsoft.XMLHTTP'); }        returnXh} function Add_stu () {var xhr=getxhr ();
Xhr.onreadystatechange=function () {#只要是状态码发生改变就会触发varData=Xhr.responsetext; varRet_dict =json.parse (data); if(xhr.readystate==4) {alert (ret_dict['Status']) document.getElementById ("Add"). Reset (); Document.getelementsbyclassname ("Model")[0].classname + ='Hide'; Document.location.reload ()}}
        //Get text value        varUsername=document.getelementsbyname ("username")[0].value; varAge = Document.getelementsbyname (' Age')[0].value; //var token =document.getelementsbyname (' Csrfmiddlewaretoken ') [0].value;        vartoken ="{{Csrf_token}}"        //Get form values for radio        varRadio = Document.getelementsbyname ('Gender'); varGender=NULL;  for(i=0; i<radio.length;i++){            if(Radio[i].checked){                if(i==0) Gender=1; ElseGender=0; }        }        //Get Select form values        var Select=document.getelementsbyname ('class')[0]        varindex=Select. SelectedIndex; varsel_id =Select[Index].value; //Reorganization Data        vardata ="username="+username+"&age="+age+"&gender="+gender+"&class="+sel_id+"&csrfmiddlewaretoken="+token; Xhr.open ('Post','/add_student.html');
#请求头一定要设置Xhr.setrequestheader ( " Content-type", "Application/x-www-form-urlencoded;charset-utf-8 ");    Xhr.send (data); }

To delete a case: Get and post requests from native Ajax

JavaScript implements AJAX to send form data