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

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

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

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

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

对于一个form表单:

用户名: 密码:


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

用户名: 密码:

下面我们来实现这个js函数:
function submit(id,url,type){
    var form = document.getElementById(id);//获取要提交的div
    var inputs = form.getElementsByTagName("input");//获得想要提交的所有div
    var object = new Object();//创建一个存放数据的对象
    for(var i=;i
这样就用ajax代替了form表单提交,当然函数还可以做出很多优化,不过这里就只提一个大概的思路了。

你可能感兴趣的:(js)