submit和ajax提交的区别

submit提交和ajax提交的区别

submit会刷新页面，ajax不会刷新页面form表单内有button的type为submit的按钮可以点击按钮提交表单，触发submit事件form表单内即使没有button的type为submit的按钮,也可以在输入框内回车来提交，触发submit事件在submit事件中，阻止默认事件或返回false，可兄罩友停止提羡槐交表单，例如表单校验闷返但是如果你的数据需要处理，就需要在submit中阻止原生提交，自定义用ajax来提交.

jquery.form.js的ajaxsubmit功能更强大些。

体现如下：

1、html简单一个form信息后，js简单调用

<form id="myForm" action="comment.php" method="post">

Name: <input type="text" name="name" />

Comment: <textarea name="comment"></textarea>

<input type="submit" value="Submit Comment" />

</form>

<script>

// wait for the DOM to be loaded

$(document).ready(function() {

// bind 'myForm' and provide a simple callback function

$('#myForm').ajaxForm(function() {

alert("Thank you for your comment!")

})

})

</script>

2、谨洞袜jquery.form.js的ajaxsubmit是将表单数据序列化再提交的，jquery的ajax则需要自己处理表单数据并附在data参数里

3、jquery的ajax方法支持异祥激步提交数据，但不支持文件上传，而jquery.form.js的ajaxsubmit是支持异步文件上传并获取响应结果，所以一般用到上传颤者的项目我会选择jquery.form这个插件

这个是我网络找的，很适合你哦。这种问题多用Google哦，配合关键字搜索很容易搜到想要的。

今天在使用jquery.form插件的ajaxSubmit上传文件时，在IE、chorme下测试，老是出现下载文件的提示框，谷歌百度了半天，基本没有人说明是什么原因的，在查看了jquery.form的源码时，发现了下面的代码：

if (options.iframe !== false &&(options.iframe || shouldUseFrame)) {

if (options.closeKeepAlive) {

$.get(options.closeKeepAlive, function() {

fileUploadIframe(a)

})

}

else {

fileUploadIframe(a)

}

}

else if ((hasFileInputs || multipart) &&fileAPI) {

fileUploadXhr(a)

}

else {

$.ajax(options)

}

在ajaxSubmit提交表单的时候，如果表单内有文件上传的话，会判断参数是否配置的iframe为false参数，如果没有，会伍兆简用创建隐藏iframe方式提交表单，如果设定了iframe为false，则判断浏览器是否支持HTML5的fileAPI，支持就直接使用XHR方式提交，否则就当作普通表腔裤单提交。

所以因为是用隐藏iframe提交的表单，如果服务器返回的是“application/json”类型的数据，IE和Chrome默认是下载文件的，因为内容是返回给了iframe，而不是ajaxSubmit的success方法。在iframe加载了返回结果后，ajaxSubmit的success方猜搜法是去读取iframe的内容来转换成json对象使用。

解决办法就是，在ajaxSubmit提交表单的配置里面，增加一个参数，服务器端判断是否是ajaxSubmit提交过来的表单，是的话就返回“text/html”类型的内容，不是就可以返回“application/json”的。

简单的说就是ajaxSubmit上传文件的话，返回的内容只能是网页内容的，否则IE就有可能出现下载提示框。

---