您的位置：首页 > 其它

ajaxForm和ajaxSubmit的区别

2016-07-25 00:00 295 查看

摘要: 在提交表单时,一般要经过前台验证处理,form插件为我们提供了非常大便利,我们需要引用jquery-form.js插件,下面我们一起来了解下如何使用form插件

ajaxForm和ajaxSubmit的区别:

ajaxForm方法需要在submit的情况下才能起作用,而ajaxSubmit本身就具有submit的功能

栗子:

<script>
$(document).ready(function(){
$("#form1").ajaxForm(function(){
$("#showArea").html("这里的一段话将会覆盖原本div里面的内容").show();
});
});
function formSubmit(){
// 这里的submit会引发上面的ajaxForm
$("#form1").submit();
}
function formSubmitAgain(){
$("#form1").ajaxSubmit(function(){
$("#showArea").html("ajaxSubmit自带提交功能,这里的一段话将会覆盖原本div里面的内容").show();
});
}
</script>
<!-- 这里的Ajax.jsp是另外一个页面,如果写成本页面的话,将即刻刷新,无法看到div里面显示的内容 -->
<form action="Ajax.jsp" id="form1" method="post">
name:<input type="text" id="username" name="username"><br>
age:<input type="text" id="userage" name="userage"><br>
<input id="send1" type="button" value="提交a" onclick="formSubmit()"><br>
<input id="send2" type="submit" value="提交b" ><br>
<input id="send3" type="button" value="提交c" onclick="formSubmitAgain()" ><br>
</form>
<div id="showArea" style="display: none">asddsadsad</div>

ajaxSubmit和ajaxForm都能接收一个或零个参数,可以是function也可以是options,下面我们来看看接收的是options该如何处理?

栗子:

<body>
<script>
function submitForm(){
var options={
//这里的url是配置的servlet
url: "AjaxServletDemo",
//如果success不起作用,则可能是dataType的类型写错了,或者url路径不对
//dataType的三种类型,"json","html","xml",也可以写null
dataType: "xml",
beforeSubmit: checkInput,
success: callback,
type: "post"
};
$("#form1").ajaxSubmit(options);
}
function checkInput(formData,jqform,options){
//这里返回的是name和age的输入值,即username=GY&userage=13,这里的GY和13分别是我输入的值
var queryString =$.param(formData);
//转换成DOM元素再取具体的值
var username=jqform[0].username.value;
//去除options里封装的数据,没有的则为默认值
var url=options.url;
var username=$("#username").val();
if(username.length<3){
//此时后台不会受到请求
alert("名字长度不能小于3");
return false;
}
return true;
}
function callback(responseText,responseStatus,XMLHttpRequest,$form){
//此时我返回的数据类型是xml格式,则需要去解析
//content-type为text/xml;charset=utf-8
//此时后台返回的数据是<message>数据</message>
var message=$('message',responseText).text();
alert(responseText+"..."+responseStatus+XMLHttpRequest.readyState+$form+"........."+message);
//alert(responseText.username);
}
</script>
<!-- 在options里已经配置了action和method,所以这两个可以不写 -->
<form  id="form1" method="post">
name:<input type="text" id="username" name="username"><br>
age:<input type="text" id="userage" name="userage"><br>
<input id="send" type="button" onclick="submitForm()" value="提交" ><br>
</form>
</body>

返回的数据类型一般有三种,分别是xml,json,和html(可以是纯文本).

上面已经写出xml格式的数据,下面我在写出余下两种:

Json:
var options={
//这里的url仅仅是一个json文件
url: "../testJson.json",
//如果success不起作用,则可能是dataType的类型写错了,或者url路径不对
//dataType的三种类型,"json","html","xml",也可以写null
dataType: "json",
beforeSubmit: checkInput,
success: callback,
type: "post"
};
此时callback方法的第一个参数即为json数据:
function callback(responseText,responseStatus,XMLHttpRequest,$form){
alert(responseText.username);
}
注:testJson.json里的数据如下:
{"username":["GY","GY1"],"userage":"30"}
Json文件就是格式非常严格的纯文本

Html文件不需要经过解析,可以直接写出来.此处就不在赘述.

上面所有的例子都是我一点一点敲出来,亲测可用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajaxForm ajaxSubmit

相关文章推荐

新的分享

章节导航