JavaScript实现ajax发送表单数据
知识点：
1.重置表单数据
2.获取表单数据（纯JavaScript）
3.设置表单数据（纯JavaScript）
4.ajax发送数据到客户端
（1）设置请求头，自己组合数据
（2）实例化表单对象，不需要设置请求头，数据不需要自己组合
添加案例：
前端样式：
<style> .model{ position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: white; } .hide{ display: none; } </style>
前端html代码：
<div><a onclick="show_form();">添加</a></div> <div class="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>男 <input type="radio" name="gender" value="0">女 <select name="class"> {% for cls in classes %} <option value="{{ cls.id }}">{{ cls }}</option> {% endfor %} </select> <input type="button" onclick="add_stu();" value="添加"> </form> </div> <div> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>班级</th> <th>编辑</th> </tr> </thead> <tbody> {% for row in students %} <tr><td>{{ row.id }}</td> <td>{{ row.username }}</td> <td>{{ row.age }}</td> <td> {% if row.gender %} 男 {% else %} 女 {% endif %} </td> <td>{{ row.cls }}</td> <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid={{ row.id }}">编辑</a></td> </tr> {% endfor %} </tbody> </table> </div>
相关js代码：show_form
function show_form(){ document.getElementsByClassName("model")[0].className = 'model'; }
ajax发送：
function GetXhr(){ if(XMLHttpRequest){ var Xh = new XMLHttpRequest(); }else{ Xh = new ActiveXObject('Microsoft.XMLHTTP'); } return Xh } function add_stu(){ var xhr=GetXhr();
xhr.onreadystatechange = function(){ #只要是状态码发生改变就会触发 var data=xhr.responseText; var ret_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() } }
//获取text值 var username=document.getElementsByName("username")[0].value; var age = document.getElementsByName('age')[0].value; //var token =document.getElementsByName('csrfmiddlewaretoken')[0].value; var token = "{{ csrf_token }}" //获取radio的表单值 var radio = document.getElementsByName('gender'); var gender=null; for(i=0;i<radio.length;i++){ if(radio[i].checked){ if(i==0) gender=1; else gender=0; } } //获取select表单值 var select=document.getElementsByName('class')[0] var index=select.selectedIndex; var sel_id = select[index].value; //重组数据 var data = "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); }
删除案例可看：原生ajax中get和post请求
修改案例：
前端html代码：
<tr>
<td>9</td>
<td>fwa发</td>
<td>23</td>
<td>女</td>
<td>Python工程师</td>
<td><a onclick="XhrPostRequest(this);">删除</a>|<a onclick="show_form_edit(this);">编辑</a></td> </tr>
<style> .model,.model_2{ position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: white; } .hide{ display: none; } </style> <div class="model_2 hide"> <form method="post" id="edit"> <input type="hidden" name="id" value=""> <input type="text" name="username" placeholder="username" value=""> <input type="text" name="age" placeholder="age" value=""> <input type="radio" name="gender" value="1" >男 <input type="radio" name="gender" value="0" >女 <select name="class"> {{% for cls in classes %} <option value="{{ cls.id }}">{{ cls }}</option> {% endfor %} </select> {% csrf_token %} <input type="button" onclick="edit_stu(this);" value="修改"> </form> </div>
js代码：
function GetXhr(){ if(XMLHttpRequest){ var Xh = new XMLHttpRequest(); }else{ Xh = new ActiveXObject('Microsoft.XMLHTTP'); } return Xh }
显示模态对话框，自动添加内容：
//修改表单 function show_form_edit(ths){
#显示编辑框 document.getElementsByClassName("model_2")[0].className = 'model_2';
#获取原来table表格中的数据信息 var id=ths.parentElement.parentElement.childNodes[0].textContent; var username=ths.parentElement.parentElement.childNodes[1].textContent; var age=ths.parentElement.parentElement.childNodes[2].textContent; var gender=ths.parentElement.parentElement.childNodes[3].textContent.trim(); if(gender=="男"){ gender=1; }else{ gender=0; } var classes=ths.parentElement.parentElement.childNodes[4].textContent; #开始修改显示出来的form表单数据 form_edit = document.getElementById("edit"); id_inp = form_edit.firstElementChild; id_inp.value=id; user_inp = id_inp.nextElementSibling; user_inp.value=username; age_inp = user_inp.nextElementSibling; age_inp.value=age; gender_inp1=age_inp.nextElementSibling; if(gender_inp1.value==gender){ gender_inp1.checked=true; } gender_inp2=gender_inp1.nextElementSibling; if(gender_inp2.value==gender){ gender_inp2.checked=true; } sel_inp = gender_inp2.nextElementSibling; for(var i=0;i<sel_inp.length;i++){ if(sel_inp[i].text==classes){ sel_inp[i].selected=true; break; } } }
点击修改，ajax提交数据（使用form对象提交，就不需要请求头设置了，否则设置出错会报错）：
//发送表单 function edit_stu(ths){
#实例化表单对象 var form = new FormData();
#开始获取数据 var csrf_ele=ths.previousElementSibling; var sel_ele=csrf_ele.previousElementSibling; var gender_ele = sel_ele.previousElementSibling; if(gender_ele.checked){ var gender=1 } var gender_ele1=gender_ele.previousElementSibling; if(gender_ele1.checked){ var gender=0 } var age_ele = gender_ele1.previousElementSibling; var user_ele = age_ele.previousElementSibling; var id_ele = user_ele.previousElementSibling; #将数据添加到表单对象中，组合发送 form.append('csrfmiddlewaretoken',csrf_ele.value) form.append("class",sel_ele.value) form.append('gender',gender) form.append('age',age_ele.value) form.append('username',user_ele.value) form.append('nid',id_ele.value) var xhr = GetXhr() xhr.onreadystatechange = function () { if(xhr.readyState==4){ alert("提交成功") document.getElementById("edit").reset() document.getElementsByClassName("model_2")[0].className += ' hide'; document.location.reload() } } xhr.open('post','/edit_student.html',true)#不需要设置请求头 xhr.send(form) }
补充：使用jquery获取form表单时：
可以使用：$("#fm").serialize()
