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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程