js将form表单提交数据封装为ajax提交

对于数据提交，html自带了form表单，以form表单里的input框的name为key值，以其所对应的value为value值，传给后台供其使用。但是这样的方法与ajax传输数据还是有许多差距：

ajax数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低。

而表单提交则整个页面重绘，如果需要给后台action传值，url还会改变。

我们就来尝试将一个普通的form表单封装成一个ajax提交数据的表单。

对于一个form表单:

<form action="某url" type="POST">
用户名:<input name="username" type="text"/>
密码:<input name="password" type="password"/>
<button type="submit">提交</button>
</form>

对于普通的form表单，我们点击提交就能提交到对应的url，现在我们想要使用ajax做出同样的效果。首先对html代码做出修改：

<div id="id">
用户名:<input name="username" type="text"/>
密码:<input name="password" type="password"/>
<button οnclick="submit('id','某url','POST')">提交</button><!--取消submit的type 变成增加一个submit方法 下面我们在js中实现这个submit方法-->
</div><!--修改为div-->

下面我们来实现这个js函数：

function submit(id,url,type){var form = document.getElementById(id);//获取要提交的divvar inputs = form.getElementsByTagName("input");//获得想要提交的所有divvar object = new Object();//创建一个存放数据的对象for(var i=;i<inputs.length;i++){object[inputs[i].getAttribute("name")]=inputs[i].value;//动态生成数据的键值对    }var jsonData = JSON.stringify(object);//根据数据生成json数据//ajax发送数据$.ajax({url:url,type:type,data:jsonData,dataType:'json'
});
}

这样就用ajax代替了form表单提交，当然函数还可以做出很多优化，不过这里就只提一个大概的思路了。

js将form表单提交数据封装为ajax提交相关推荐

form表单，submit，ajax提交
尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...
js 提交form表单,js更改form表单的action属性
2019独角兽企业重金招聘Python工程师标准>>> js 提交form表单 <s:form id="formID1" action="favo ...
js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
JS阻止form表单提交失败
JS阻止form表单提交失败问题简介解决办法问题简介 <form th:action="@{/user.do}" method="post" ons ...
JS模拟Form表单提交
用java写了一个下载的功能,测试没有问题,但前台就是不弹出下载的提示框. 后来发现如果你的提交方式是ajax的方式的话是不会弹出提示框的,然后换成了form提交,顺利弹框通过,下来我们就用js模拟f ...
form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 1 <!doctype html> 2 <html lang="en"> 3 < ...
ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]
一.截图和示例共用Ext.FormPanel 1.1 截图由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码. 1.2 示例共用Ext.FormPanel ...

js将form表单提交数据封装为ajax提交

js将form表单提交数据封装为ajax提交相关推荐

最新文章

热门文章