知识点:

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="" checked>男
<input type="radio" name="gender" value="">女
<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="">
<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")[].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==){
alert(ret_dict['status'])
document.getElementById("add").reset();
document.getElementsByClassName("model")[].className += ' hide';
document.location.reload()
}
}
//获取text值
var username=document.getElementsByName("username")[].value;
var age = document.getElementsByName('age')[].value;
//var token =document.getElementsByName('csrfmiddlewaretoken')[0].value;
var token = "{{ csrf_token }}"
//获取radio的表单值
var radio = document.getElementsByName('gender');
var gender=null;
for(i=;i<radio.length;i++){
if(radio[i].checked){
if(i==)
gender=;
else
gender=;
}
}
//获取select表单值
var select=document.getElementsByName('class')[]
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></td>
  <td>fwa发</td>
  <td></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="" >男
<input type="radio" name="gender" value="" >女
<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")[].className = 'model_2';
    #获取原来table表格中的数据信息
var id=ths.parentElement.parentElement.childNodes[].textContent;
var username=ths.parentElement.parentElement.childNodes[].textContent;
var age=ths.parentElement.parentElement.childNodes[].textContent;
var gender=ths.parentElement.parentElement.childNodes[].textContent.trim();
if(gender=="男"){
gender=;
}else{
gender=;
}
var classes=ths.parentElement.parentElement.childNodes[].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=;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=
}
var gender_ele1=gender_ele.previousElementSibling;
if(gender_ele1.checked){
var gender=
}
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==){
alert("提交成功")
document.getElementById("edit").reset()
document.getElementsByClassName("model_2")[].className += ' hide';
document.location.reload()
}
}
xhr.open('post','/edit_student.html',true)#不需要设置请求头
xhr.send(form)
}

补充:使用jquery获取form表单时:

可以使用:$("#fm").serialize()

JavaScript实现ajax发送表单数据的更多相关文章

  1. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  2. hyper发送表单数据

    前言 某个美丽的下午,运维把服务器上的nginx升级了,http协议也变成了http2.0,我本地的requests再也连接不到服务器,然后就找到了额hyper 但是hyper的文档写的很简单,而且相 ...

  3. 异步发送表单数据到JavaBean,并响应JSON文本返回

    1)  提交表单后,将JavaBean信息以JSON文本形式返回到浏览器 <form> 编号:<input type="text" name="id&q ...

  4. jquery Ajax提交表单数据

    //表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...

  5. 每天一个JavaScript实例-检測表单数据

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 通过FormData对象可以组装一组用 [XMLHttpRequest]发送请求的键/值对,它可以更灵活方便的发送表单数据。

    工作记录用 1 大概页面,点击选择按钮,选择文件,填写备注并可以上传前预览,然后点击上传按钮开始上传 2 html+js代码 <h2>Test</h2> <div id= ...

  7. 21SpringMvc_异步发送表单数据到Bean,并响应JSON文本返回(这篇可能是最重要的一篇了)

    这篇文章实现三个功能:1.在jsp页面点击一个按钮,然后跳转到Action,在Action中把Emp(int id ,String salary,Data data)这个实体变成JSON格式返回到页面 ...

  8. jquery实现ajax提交表单数据或json数据

  9. 【ASP.NET Web API教程】5.2 发送HTML表单数据:URL编码的表单数据

    原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内 ...

随机推荐

  1. 异常 java.lang.IllegalArgumentException: Result Maps collection already contains value

    这是因为用了一次以上(多次)mbg导致sql映射文件堆积导致的异常,删除对应的sql映射文件,然后重新生成即可. Caused by: java.lang.IllegalArgumentExcepti ...

  2. Linux+Nginx+Asp.net Core及守护进程部署

    上篇<Docker基础入门及示例>文章介绍了Docker部署,以及相关.net core 的打包示例.这篇文章我将以oss.offical.site站点为例,主要介绍下在linux机器下完 ...

  3. centos7 RabbitMQ部署

    一.RabbitMQ简单介绍在日常工作环境中,你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务 ...

  4. tomcat设置开机自启动和后台运行

    前言:当浏览器页面显示不出来的时候,重启装在服务器上的tomcat可以正常使用,是通过进入tomcat的bin目录,双击startup.bat运行启动的程序,这时会弹出启动窗口(tomcat的运行日志 ...

  5. A1043 Is It a Binary Search Tree (25 分)

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  6. 在windows10上搭建caffe

    caffe环境的搭建一直是让我最头疼的,最近在Windows10上成功搭建了caffe,在此对搭建过程进行记录. 安装主要是按照caffe github上的安装说明进行的,caffe的github主页 ...

  7. Laravel 5.6 视图用Blade语法传递变量和流程控制if 语句和循环语句

    Laravel5.6 视图用Blade语法传递变量和流程控制if 语句和循环语句 Laravel 的 View 部分是内置了两套输出系统:直接输出和使用 Blade 引擎“编译”后输出,默认情况下它们 ...

  8. javascript 数组对象及其方法

    数组声明:通过let arr = new Array(); 或者 let arr = []; 数组对象可调用的方法: 1)find方法,使用情况是对数组进行筛选遍历,find方法要求某个函数(A)作为 ...

  9. 个人项目——wc源程序特征统计

    这一次要做的项目是wc——统计程序文件特征的命令行程序. 根据需求需求得到的模式为:wc.exe [parameter][filename] 在[parameter]中,用户通过输入参数与程序交互,需 ...

  10. Ubuntu 14.04 installation & bugs on Alienware-13

    列一下Alienware 13笔记本配置: Processor: Intel Core 5th Generation i5-5200U Processor (3M Cache, up to 2.70 ...