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了。
分享到:
相关推荐
asp.net调用 jquery ajax 后台使用一般处理程序或者当前页方法
用struts2+jquery的ajax的几个小例子,级联,自动补全等,没有数据库,直接就运行。
jquery 分页详细例子 ajax无刷新
一个完整的jquery+ajax传送请求的实例
mvc jquery Ajax,用户登录,无刷新分页。数据库为sql 2005备份文件,在sql 2005_bak文件夹下。各位前辈看了,对不合理的请指教。
Vs2005C#下使用Jquery实现的Ajax简单实例
jquery ajax json 的例子
jquery和ajax的集成例子 jquery和ajax的集成例子 jquery和ajax的集成例子
php+jquery+ajax最简单例子
load()方法 、 $.get()和$.post()方法 、 $.getScript()和$.getJson() 、 $.ajax()方法 、 ...jQuery中的Ajax全局事件 这些都有详尽的例子,一看代码,你就能明白jquery里实现ajax是怎么回事了,简单明了。
jquery实现ajax小例子(资源分高了点,但绝对物超所值) 使用jquery实现XML与JSON同服务器的通信 提供了很多个常见的Ajax特效,学习这几个特效能助您学习jquery 项目中已有相关的包及工具,导入MyEclipse后可直接...
IWEDIT1的事件处理程序启动AJAX调用,将在IWEDIT1输入的文字传到后台,后台的TIWURLResponderEvent响应前台传来的数据,处理完毕后返回前台,通过前台在AJAX调用时注册的回调函数将处理结果显示在屏幕上。...
IW12.2.8JQueryAjax简单例子byC5Soft.rar
springmvc利用jquery实现ajax的例子,jar包都在里面,导入即可运行,代码不是我写的,我从网上下载的
jquery+ajax+json例子,是一个web例子
myeclipse开发的, 弘扬开源精神,杜绝积分下载 刚出炉的例子
ajax,jQuery 例子大全,json例子,入门到精通的都在里面。 还有javascript帮助文档
Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子)
有窗口 树 可修改的表格 仿GoogleSuggest自动补全等