数码吧

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

下面我们来实现这个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<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'
});
}