struts2 json 與jquery整合實現ajax,使用者註冊校正

來源:互聯網
上載者:User
文章目錄
  • 概述
  • 參數
  • 樣本

        實現非同步通訊,用json與jquery實現起來相當簡便。

 Struts2整合jQuery

Struts2中主要的業務操作都是通過Action來完成的,此時就需要jQuery來訪問Struts2的Action:
$.post("Action",……)

1.1   registe.jsp頁面:

 功能:使用者註冊,首先輸入使用者名稱:


   正確:使用者名稱沒有被註冊,你可以使用;

   錯誤:使用者名稱已經被註冊;

 1.2 jQuery代碼:

  

function checkkey(){   var url = 'showAllInstitute.action';   var params = {companyKey:$('#ckey').attr('value')};    jQuery.post(url, params, callbackFun);}function callbackFun(data){   $('#warn').html(data);  //顯示返回的資料          }


     

 1.3 HTML:當文字框失去焦點時,觸發回調事件。

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <script language="JavaScript" src="js/jquery-1.6.3.js"></script>   <script type="text/javascript" src="js/jquery.js"></script>  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'jquery.jsp' starting page</title>        <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->  </head>    <body>     <DIV class=line><LABEL class=big id=lblName>使用者註冊</LABEL>          <INPUT id='ckey' name="ckey" onblur="checkkey();"><span id="warn"></span>     </DIV>  </body></html>



說明:

1)當文字框‘ckey’失去焦點時:調用“checkkey”函數;

2) “checkkey”函數分別確定兩個資訊:

3) 非同步訪問:'showAllInstitute.action'——判斷標識是否正確的Action類。

4)參數:{companyKey:$('#ckey').attr('value')},一個以json格式拼字的參數。

5)發出非同步請求:jQuery.post(url, params, callbackFun);

 json格式如下:

   


1.4  Action代碼:

public String queryAllInstitutes(){try     {  String remessage;if("jquery".equals(companyKey))remessage="使用者名稱已經被註冊";elseremessage="使用者名稱沒有被註冊,您可以使用此使用者名稱";HttpServletResponse response = ServletActionContext.getResponse(); //response.setContentType("text/html"); //Firefox瀏覽器必須加上這句        response.setCharacterEncoding("UTF-8");              response.getWriter().write(remessage);          }     catch (Throwable e)      {       e.printStackTrace();       }       return null;}

如果是Firefox瀏覽器記得加上上面的那句,否則出現下面錯誤:

1.5 struts.xml中的配置

<action name="showAllInstitute" class="net.hncu.struts2.action.ShowAllInstituteAction" method="queryAllInstitutes"><!-- 定義處理結果與視圖資源之間的關係--></action>



備忘:

傳回值:XMLHttpRequestjQuery.post(url, [data],[callback],[type])概述

通過遠程 HTTP POST 請求載入資訊。

這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數,請使用 $.ajax。

參數 url,[data],[callback],[type]String,Map,Function,String V1.0

url:發送請求地址。

data:待發送 Key/value 參數。

callback:發送成功時回呼函數。

type:返回內容格式,xml, html, script, json, text, _default。

樣本

1描述:

請求 test.php 網頁,忽略傳回值:

jQuery 代碼:
$.post("test.php");
2描述:

請求 test.php 頁面,並一起發送一些額外的資料(同時仍然忽略傳回值):

jQuery 代碼:
$.post("test.php", { name: "John", time: "2pm" } );
3描述:

向伺服器傳遞資料數組(同時仍然忽略傳回值):

jQuery 代碼:
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
4描述:

使用 ajax 請求發送表單資料:

jQuery 代碼:
$.post("test.php", $("#testform").serialize());
5描述:

輸出來自請求頁面 test.php 的結果(HTML 或 XML,取決於所返回的內容):

jQuery 代碼:
$.post("test.php", function(data){   alert("Data Loaded: " + data); });
6描述:

向頁面 test.php 發送資料,並輸出結果(HTML 或 XML,取決於所返回的內容):

jQuery 代碼:
$.post("test.php", { name: "John", time: "2pm" },   function(data){     alert("Data Loaded: " + data);   });
7描述:

獲得 test.php 頁面的內容,並儲存為 XMLHttpResponse 對象,並通過 process() 這個 JavaScript 函數進行處理:

jQuery 代碼:
$.post("test.php", { name: "John", time: "2pm" },   function(data){     process(data);   }, "xml");
8描述:

獲得 test.php 頁面返回的 json 格式的內容::

jQuery 代碼:
$.post("test.php", { "func": "getNameAndTime" },   function(data){     alert(data.name); // John     console.log(data.time); //  2pm   }, "json");



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.