jquery+ajax+struts2

时间 2019-11-16

标签 jquery+ajax+struts2 jquery ajax struts 栏目 JQuery 繁體版

原文原文链接

AJAX 是与服务器交换数据的艺术，它在不重载所有页面的状况下，实现了对部分网页的更新。
编写常规的 AJAX 代码并不容易，由于不一样的浏览器对 AJAX 的实现并不相同。
这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为咱们解决了这个难题，咱们只须要一行简单的代码，就能够实现 AJAX 功能。javascript

如今来看一下3个经常使用的ajax方法
$(selector).load(URL,data,callback);
必需的 URL 参数规定您但愿加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。是一个json格式的数据。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
看一个获取服务端时间的例子
jsp：html

　　<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>

页面是这样的：java

其中basePath是这样的：jquery

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
pageContext.setAttribute("basePath", path);
%>

servlet：web

    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。
看一下效果，点击获取时间就能够获取到服务端的时间：ajax

后2个参数怎么使用，别急，下面在$.post中讲解
定义和用法
post() 方法经过 HTTP POST 请求从服务器载入数据。数据库

语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)apache

参数	描述
url	必需。规定把请求发送到哪一个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

看一个判断登陆的例子来了解它的用法，这个例子经过验证登陆而后返回一个图片的路径，若是输入正确，若是输入正确，则图片显示一个对号，不然显示一个叉：json

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中同样。

更多相关文章...