日期:2014-05-16  浏览次数:20629 次

jquery ajax 小例子

1、首先是jsp页面 (ajax 提交的数据以键值对的形式)

<script language="javascript" src="<%=basePath%>/js/jquery.js"></script>
<script type="text/javascript">
	function tosubmit(){
		$.post("login.action", {userName:"John",password:"123456"} );
	}
</script>

<form name="loginForm" action="login.action" method="post">
	<input type="button" onclick="tosubmit();" value="登录"/>
</form>

? 因为使用的是 jquery ajax 请求,因此首先需要引用 jquery.js。

? 本例使用 jquery ajax 的 post 提交,因此需要使用 $.post() 方法。

? 此方法的第一个参数 url:待载入页面的URL地址(可以是.jsp或.do或.action)。

? 此方法的第二个参数 data (可选):待发送 Key/value 参数。以struts2为例,在action中需要有对应key的属性值,及set和get方法。此 data 是用 {} 括起来的,以 key:value 的形式表现的,如果是多个键值对,则以分号分隔开。

? 此方法的第三个参数 callback (可选):载入成功时的回调函数。

? 此方法的第四个参数 callback (可选):返回内容格式,xml, html, script, json, text, _default。

?

2、以 struts2 为例:

public class HelloWorld extends ActionSupport {

	private static final long serialVersionUID = -1909952087423834225L;
	private String userName;
	private String password;
	
	public String execute() throws Exception {
		//userName:John, password:123456
		System.out.println("userName:"+userName+", password:"+password);
        return "LIST";
    }
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
}

? 首先需要有跟jsp页面上匹配ajax传过来的属性名:userName, password。并且需要有此属性的set和get方法。

? 输出结果:userName:John, password:123456

? 可见,在action中得到了从jsp页面通过ajax请求过来的两个属性userName, password的值:John, 123456

?

3、jsp页面 (ajax 提交的数据以序列化的形式)

<script language="javascript" src="<%=basePath%>/js/jquery.js"></script>
<script type="text/javascript">
	function tosubmit(){
		$.post("login.action", $("#f1").serialize());
	}
</script>

<form name="loginForm" action="login.action" method="post" id="f1">
	用户名:<input type="text" name="userName"/><br>
	密  码:<input type="text" name="password"/><br>
	<input type="button" onclick="tosubmit();" value="登录"/>
</form>

? 当 ajax 以序列化的形式提交数据的时候,需要指定<form>的id,例如本例中 <form id="f1">

? 在 ajax 的 post 方法的第2个参数中指定以序列化方式:$("#f1").serialize() 。就是把f1这个form序列化后传给后台。

? 在 form 中,还是像平时一样,写上业务需要的各个属性,并且在struts的 action 中都有对应的属性值及set和get方法。这样在action中就会取到页面上通过 ajax 提交的值。

? 例如本例中就可以动态的获得页面上输入的 userName,? password 的值。

?

4、jsp页面 (ajax 提交数据后,带回调函数的例子)

<script type="text/javascript">
	function tosubmit(){
		$.post("login.action", $("#f1").serialize(),function(wjy){
			if(wjy==0){
				alert("用户名密码正确!");
			}else{
				alert("用户名密码错误!");
			}
		});
	}
</script>

<form name="loginForm" action="login.action" method="post" id="f1">
	用户名:<input type="text" name="userName"/><br>
	密  码:<input type="text" name="password"/><br>
	<input type="button" onclick="tosubmit();" value="登录"/>
</form>

??当 ajax 提交数据后会调用一个匿名的回调函数 function(wjy){...} 。参数wjy是从后台传过来的值,如果传过来的值为0,则表示用户名密码正确;如果从后台传回来的值为1,则表示用户名密码错误。现在看下后台代码:?

public class HelloWorld extends ActionSupport {

	private static final long serialVersionUID = -1909952087423834225L;
	private String userName;
	private String password;
	
	public String execute() throws Exception {
		//验证用户名和密码的合法性,正常来说需要取数据库中的值来验证
		if("wangjy".equals(userName) && "403".equals(password)){
			ServletActionContext.getResponse().getWriter().print(0);
		}else{
			ServletActionContext.getResponse().getWriter().pri