日期:2014-05-16 浏览次数:20642 次
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