ajaxForm和ajaxSubmit的区别

最新推荐文章于 2024-01-10 18:02:22 发布

weixin_33873846

最新推荐文章于 2024-01-10 18:02:22 发布

阅读量116

点赞数

文章标签： json java

原文链接：https://my.oschina.net/gy9311/blog/717714

版权

为什么80%的码农都做不了架构师？>>>

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文件不需要经过解析,可以直接写出来.此处就不在赘述.

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

转载于:https://my.oschina.net/gy9311/blog/717714