开发笔记:JavaScript实现ajax发送表单数据

function show_form(){
document.getElementsByClassName("model")[0].className = \'model\';
}

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){
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);
}

　　9
　　fwa发
　　23
　　女
　　Python工程师
　　"XhrPostRequest(this);">删除|"show_form_edit(this);">编辑

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){
if(sel_inp[i].text==classes){
sel_inp[i].selected=true;
break;
}
}
}

//发送表单
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)
}