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().print(1);
		}
        return null;
    }
	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;
	}
}

 当 ajax 传进来的userName 和 password 分别为 wangjy 和 403 的时候，表示用户名密码争取，返回到页面值为0。

 ServletActionContext.getResponse().getWriter().print(0); 表示返回页面的值。

 注意：action中的方法 execute() 一定要为 null。否则返回页面的值也包括了此方法返回的值，就不仅仅是0或1了。

 

 

评论

1 楼 liuweihug 2014-05-22  

这个博客不错。都是干货。Jquery+asp.net 后台数据传到前台js进行解析的办法说明 - 
http://www.suchso.com/projecteactual/jquery-aspnet-back-js-parse-object-list.html