jQuery與Struts2綜合應用[stream/json] - WJ-163－IT工程師數位筆記本

文章出處

一、使用stream類型的Result實現Ajax

具體步驟：

① 定義InputStream類型的成員變量及getter和setter

②具體業務方法中將要發送到客戶端的json字符串賦值給成員變量

③編寫struts.xml，定義stream生成響應數據類型及輸出結果

二、配置Action的result

具體步驟：

①定義package，并繼承struts-default

②使用<action>標簽定義StreamResultAction類對應的名稱和所在位置

③使用stream類型的result結果集

④使用<param>標簽指定stream生成響應數據類型及輸出結果

三編寫Action類并繼承自ActionSupport類

注：定義的inputStream成員變量要和struts.xml<param>參數一致，并使用ByteArrayInputStream將要發送到客戶端的數據賦值給成員變量

四實現用戶名驗證

使用jQuery的Ajax方法發送數據到服務器端，獲取stream類型的返回數據，并更新頁面提示信息，進行拆解數據。需引入jQuery庫

 <body>
   <div id="demo"></div>
   <table>
   <tr>
   <td>姓名：<input type="text" name="name" id="name" onblur="validate();"/></td>
   </tr>
   
   <tr>
   <td>密碼：<input type="password" name="name" id="name"/></td>
   </tr>
   
   <tr>
   <td><center><input type="button" value="提交"/></center></td>
   </tr>
   </table>
   
   
   
  </body>

實現效果：

使用JSON插件實現JSON類型的Result

具體步驟：

①將struts2-json-plugin-xxx.jar加入到struts2工程下

②在struts.xml中編寫<package>標簽，并指定該package繼承json-default

③在<package>標簽下定義具體的<action>標簽，將其子標簽<result>的type屬性指定為“json”

以用戶登錄為例：當服務器端接收到用戶信息后，進行業務判斷，然后返回JSON格式的數據

JSON類型的Result的常用參數：

編寫Action類重寫execute()進行一系列判定，通過tojson()獲取到map集合的值，注意的是這里需引入gson.jar包

兩種實現方式：

    <script type="text/javascript">
    function validate(){
    //鎖定到用戶名文本框，并且取值
    var val=$('#name').val();

 $.post('json/jsontest','name='+val,function(data){
            //data就是打回到client的數據
            //強制讓data從{}語句塊形態    ----->表達式
              data=eval("("+data.result+")");
              //{\"flag\":\"false\"}
              if(data.flag=="false"){
                $("#demo").html("可用");
              }else{
                $("#demo").html("不可用");
              }
            
            }); 
    
     
     
    /*  $.post('json/jsontest','name='+val,function(data){
             //{"result":"{\"flag\":\"false\"}"}
                 data= data.result;
                 data=eval("("+data+")");
               if(data.flag=="false"){
              
                $("#demo").html("可用");
              }else{
                $("#demo").html("不可用");
              }
            },'json'); */
    }
    
    </script>