jquery+ajax+struts2
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。
这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
现在来看一下3个常用的ajax方法
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。是一个json格式的数据。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
看一个获取服务端时间的例子
jsp：
<script type="text/javascript" src="${basePath }/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
var url = "${basePath}/timeServlet";
//最简单的ajax, 默认以get方式提交, 返回值自动填充到标签中
$("#time").load(url);
});
});
</script>
</head>
<body>
当前时间：<span id="time"></span><br>
<input type="button" value="获取时间">
</body>
页面是这样的：
其中basePath是这样的：
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("basePath", path);
%>
servlet：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss");
String formatTime = sdf.format(new Date());
PrintWriter pw = response.getWriter();
pw.println(formatTime);
pw.flush();
pw.close();
}
这样就完成了一个最简单的ajax，如果有第2个参数data，提交方式就是post，否则就是get。
看一下效果，点击获取时间就可以获取到服务端的时间：
后2个参数怎么使用，别急，下面在$.post中讲解
定义和用法
post() 方法通过 HTTP POST 请求从服务器载入数据。
语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
| 参数 | 描述 |
| url | 必需。规定把请求发送到哪个 URL。 |
| data |
可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
| success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
| dataType | 可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。 |
看一个判断登录的例子来了解它的用法，这个例子通过验证登录然后返回一个图片的路径，如果输入正确，如果输入正确，则图片显示一个对号，否则显示一个叉：
jsp：
<script type="text/javascript">
$(function(){
$(":button").click(function(){
var url = "${basePath}/userServlet"; //先用servlet来做
//var url = "${basePath}/user_login.action"; //然后用struts2来做
var username = $(":text").val();
var password = $(":password").val();
var data_servlet = {"username" : username, "password" : password};
var data_struts2 = {"user.username" : username, "user.password" : password};
//先测试servlet, 测试struts2的时候将第2个data参数改为data_struts2即可
$.post(url, data_servlet, function(data, statusTxt, jqXHR){
alert("data-=-"+data);
alert("data.src-=-="+data.src);
alert("statusTxt-=-"+statusTxt);
alert("jqXHR.status-=-"+jqXHR.status); //状态码, 如200
alert("jqXHR.readyState-=-"+jqXHR.readyState);//请求执行的状态, 如4
alert("jqXHR.statusText-=-"+jqXHR.statusText); //状态字符串, 如ok
alert("jqXHR.responseText-=-"+jqXHR.responseText);//返回的字符串值
alert("jqXHR.responseXML-=-"+jqXHR.responseXML);//返回的XML数据
$("img").attr("src", '${basePath}'+data);//返回的字符串
//$("img").attr("src", '${basePath}'+data.src); //返回的是json数据
});
});
});
</script>
</head>
<body>
<form>
用户名<input type="text"><br>
密码<input type="password"><br>
<input type="button" value="点我验证">
<img>
</form>
</body>
页面是这样的：
先看用servlet做的：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); String username = request.getParameter("username");
String password = request.getParameter("password");
//从数据库查询
User user = userDao.findByUsernameAndPassword(username, password);
System.out.println(user);
PrintWriter pw = response.getWriter();
if(user != null)
pw.println("/images/icon/Button_Ok_64px_1070400_easyicon.net.ico");
else
pw.println("/images/icon/Button_Delete_64px_1070396_easyicon.net.ico");
pw.flush();
pw.close();
}
看一下效果：
如果输入正确，显示如下：
如果输入错误，显示如下：
通过jqXHR.responseText可以看到返回的是一个字符串，字符串不需要解析。接下来看一下struts2的ajax
先做web.xml中配置struts2的过滤器：
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
struts2配置文件struts.xml，放到src下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.action.extension" value="action" /> <!-- 设置struts访问后缀为action -->
<constant name="struts.enable.DynamicMethodInvocation" value="false" /> <!-- 禁止动态方法访问 -->
<package name="user-action" namespace="/" extends="json-default"> <!-- json-default是继承自struts-default的 -->
<action name="user_login" class="top.bwcx.ajax.user.UserAction">
<result type="json" /><!-- 无需跳转页面 -->
</action>
</package>
</struts>
struts2的ajax需要struts2-json-plugin.jar插件包的支持
这里是通过c3p0连接数据库, dbutils操作数据库的，有关这方面的内容，请参看我以前的随笔c3p0连接数据库的3种方式和dbutils基本使用
action中的配置:
public class UserAction extends ActionSupport {
//这里为了简单, 就直接写了一个dao, service什么的没有写
private UserDao userDao = new UserDao();
//User实体类，用来接收页面传过来的值,需要get和set方法, 很重要
private User user;
//用get方法返回值, 然后在页面取的, 这个需要get方法
private String src;
@Override
public String execute() throws Exception {
System.out.println(user.getUsername());
System.out.println(user.getPassword());
user = userDao.findByUsernameAndPassword(user.getUsername(), user.getPassword());
System.out.println(user);
if(user == null){
src = "/images/icon/Button_Delete_64px_1070396_easyicon.net.ico";
}else
src = "/images/icon/Button_Ok_64px_1070400_easyicon.net.ico";
return SUCCESS;
}
public void setUser(User user) {
this.user = user;
}
public User getUser() {
return user;
}
public String getSrc() {
return src;
}
}
ajax请求struts，是在action页面通过get方法传递响应的，此处就是src属性加上其get方法就能把图片路径返回了，返回格式是json串
在页面接收时，注意把传递的参数改为data_struts2，url也改一下，直接像这样解析json就行了：data.src
效果与刚才servlet的效果是一样的，也可以看一下打印的属性值，如：
其实收集表单项的值还有一种简单的方法，像这样
var params = $("form").serialize();
不过这样需要提供name属性值
$.get()和$.post()是类似的，接下来看一下$.ajax()
$.ajax()这个参数很多，常用的有这么几个：
type: 提交方式，get或post
url: 请求路径
data: 请求参数
success: 执行成功后所调用的函数
把这个登陆验证用这个改一下：
jsp改为：
<form>
用户名<input type="text" name="user.username"><br>
密码<input type="password" name="user.password"><br>
<input type="button" value="点我验证">
<img>
</form>
js代码改为：
<script type="text/javascript">
$(function(){
$(":button").click(function(){
var params = $("form").serialize(); //直接序列化表单
$.ajax({
type : "post",
url : "${basePath}/user_login.action",
data : params,
success : function(result){
$("img").attr("src", '${basePath}'+result.src); //返回的是json数据
}
});
});
});
</script>
其他的不变，这样也能达到一样的效果。当然，你也可以在struts2中用response对象响应ajax请求，就像在servlet中一样。
jquery+ajax+struts2的更多相关文章
- JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册
写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...
- jquery ajax + struts2用例
ajax var url = '/itsm/contract/contract!deleteShopItemById.action'; var shopItemId= selectRows[x].da ...
- Java进阶知识01 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能
1.效果图示 横线上方的部分不动(没有刷新),下方实现刷新(异步刷新) 2.实现步骤 jquery+ajax+struts技术实现异步刷新功能的步骤: 1.需要用到 jquery+ajax+st ...
- JQuery ajax请求struts action实现异步刷新的小实例
这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...
- JS jquery ajax 已看1 有用
4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择: ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jquery ajax解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery.ajax 根据不同的Content-Type做出不同的响应
使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...
- jQuery.ajax(url,[settings])
概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...
随机推荐
- jsp页面无法识别el表达式的解决方案
今天在写一个springmvc的小demo时,碰到一个问题,在jsp页面中书写为${user.username}的表达式语言,在浏览器页面中仍然显示为${user.username},说明jsp根本不 ...
- InnoDB：Lock & Transaction
InnoDB 是一个支持事务的Engine,要保证事务ACID,必然会用到Lock.就像在Java编程一下,要保证数据的线程安全性,必然会用到Lock.了解Lock,Transaction可以帮助sq ...
- 介绍一位OWin服务器新成员TinyFox
TinyFox 是一款支持OWIN标准的WEB应用的高性能的HTTP服务器,是Jexus Web Server的"姊妹篇".TinyFox本身的功能是html服务器,所有的WEB应 ...
- 再来说说 LaTeX
在我的上一篇随笔中,我提到了 Markdown.LaTeX 和 MathJax.这几个东西对目前的网络技术文章的写作.展示都有深远的影响.在上一篇中,我还给出了一份 LaTeX 语法的学习资料.在这一 ...
- Android开发学习之路-自定义控件（天气趋势折线图）
之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...
- Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结
Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码 用户操作 ,比如 ...
- Atitit onvif协议获取rtsp地址播放java语言 attilx总结
Atitit onvif协议获取rtsp地址播放java语言 attilx总结 1.1. 获取rtsp地址的算法与流程1 1.2. Onvif摄像头的发现,ws的发现机制,使用xcf类库1 2. 调用 ...
- Hexo的coney主题的一些补充说明
title: Hexo的coney主题的一些补充说明 date: 2014-12-14 14:10:44 categories: Hexo tags: [hexo,技巧] --- Coney是一个非常 ...
- 前端学HTTP之客户端识别和cookie
前面的话 Web服务器可能会同时与数千个不同的客户端进行对话.这些服务器通常要记录下它们在与谁交谈,而不会认为所有的请求都来自匿名的客户端.本文主要介绍客户端识别及cookie机制 HTTP首部 HT ...
- 前端学HTTP之URL
× 目录 [1]URI [2]URL语法 [3]字符[4]编码方法 前面的话 一般地,URL和URI比较难以区分.接下来,本文以区分URL和URI为引子,详细介绍URL的用法 URI与URL的区别 U ...