struts2中使用ajax so easy!!!

在struts2中使用ajax是非常簡單的，並且借助ajax就更加簡單了，廢話不多說，直接上代碼吧：

一般我們在操作刪除，修改等操作時，一般需要進行兩次操作，一次是具體的操作，另一次是頁面的加載，一次一般都是要傳入兩個action的

//刪除試題： 批量刪除
function deleteSub(delTagAction,listTagAction){
//得到當前的頁碼
    var currentPage=$("#currentPage").val();
//以下是得到選中的復選框
    var ids=new Array();
    if($("input[name='id']:checked").size()==0){
        alert("請選擇需要刪除的題目！");
        return false;
        
    }
    $("input[name='id']:checked").each(function(i,obj){
        ids[i]=$(obj).val();
    });
    var idStr=ids.join("-");
    $.ajax({
        url:delTagAction,
        data:{
            sendTime:(new Date()).getTime(),
            idStr:idStr
        },
        type:"post",
        async:false,
        dataType:"json",
        success:function(data){
            if(data.success){
                $("#middle").load(listTagAction,
                        {
                            sendTime:(new Date()).getTime(),
                            currentPage:currentPage
                        }
                )
                alert("刪除成功！！！");
            }else{
                alert("刪除失敗，請聯系開發人員！！！");
            }
        }
    });
}

頁面根據事件來調用該ajax就可以了，傳入的兩個參數分別是1.刪除操作的action 2.操作成功后要加載的頁面action

struts.xml：

<action name="頁面需要加載的action" class="xidian.sl.action.exam.SingleSubAction" method="singDetail">
              <result name="success" type="freemarker">/WEB-INF/admin/加載頁面</result>
          </action>
          <action name="刪除操作的action" class="xidian.sl.action.exam.SingleSubAction" method="updateSing">
              <result name="success">/WEB-INF/responseMsg.jsp</result>
          </action>

刪除操作的action:(里面的response就是一個字符串，可以更換其他名字)

//刪除單選題
    public String deleteSing(){
        try{
            singleSubService.deleteSingleSub(idStr);        //刪除
            response="{success:true}";
        }catch(Exception e){
            response="{success:false}";
            e.printStackTrace();
        }
        return SUCCESS;
    }

操作成功后會回到struts2.xml中，頁面先回到/WEB-INF/responseMsg.jsp，這個jsp只是間接輸出消息的

<%@ taglib prefix="s" uri="/struts-tags"%>
<% response.setCharacterEncoding("UTF-8"); %>
<% System.out.println(response); %>
<s:property value="response" escape="false"/>

 

另外一種提交方式就是，使用submit提交整個表單（form）使用ajax

表單代碼如下：

<div class="controltitle">當前操作：信息管理——>添加學生信息</div>
<form action ="inforAddAction.action" method ="POST" name="inforAdd" enctype="multipart/form-data" id="inforAddForm" 
            onsubmit="return checkAdd(this);">
    <table class="tablefirst" id="radioSub">
            <col style="width:5%"/>
            <col style="width:10%"/>
               <col style="width:5%"/>
            <col style="width:10%"/>
            <tr>
            <th>操作明細</th><th>寫入</th><th>操作明細</th><th>寫入</th>
            </tr>
               <tr>
                   <td>學生姓名：</td>
                   <td><input type = "text" name = "stuInfor.stuName" id = "stu_name"></td>
                <td>學生性別：</td>
                <td><input type="radio"  name = "stuInfor.stuSex"  id="stu_sex" value = "男" checked>&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio"  name = "stuInfor.stuSex"  id="stu_sex" value = "女">&nbsp;女</td>
               </tr>
               <tr>
                   <td>學生學號：</td>
                   <td><input type = "text" name = "stuInfor.stuNum" id = "stu_name"></td>
                <td>所屬專業：</td>
                <td>
                    <select name = "stuInfor.stuZy" id = "stu_name">
                        <option value="眼視光七年制">眼視光七年制</option>
                        <option value="眼視光本科">眼視光本科</option>
                        <option value="眼視光專科">眼視光專科</option>
                    </select>
                </td>
               </tr>
               <tr>
                   <td>專業學制:</td>
                   <td><input type = "text" name = "stuInfor.stuXz" id = "stu_name"></td>
                <td>學生籍貫:</td>
                <td><input type = "text" name = "stuInfor.stuJg" id = "stu_name"></td>
               </tr>
               <tr>
                   <td>入學年份:</td>
                   <td><input type="text" id="newsTime" name ="stuInfor.stuStartTime" onFocus="WdatePicker()"/></td>
                <td>畢業年份:</td>
                <td><input type="text" id="newsTime" name ="stuInfor.stuEndTime" onFocus="WdatePicker()"/></td>
               </tr>
               <tr>
                   <td>工作省市:</td>
                   <td><input type = "text" name = "stuInfor.stuWorkAddress" id = "stu_name"><font color = "red">&nbsp;&nbsp;*省+市[如浙江杭州]</td>
                <td>工作單位:</td>
                <td><input type = "text" name = "stuInfor.stuWorkPlace" id = "stu_name"></td>
               </tr>
               <tr>
                   <td>工作崗位:</td>
                   <td><input type = "text" name = "stuInfor.stuWorkPost" id = "stu_name"></td>
                <td>職務職稱:</td>
                <td><input type = "text" name = "stuInfor.stuWorkZc" id = "stu_name"></td>
               </tr>
               <tr>
                   <td>辦公電話:</td>
                   <td><input type = "text" name = "stuInfor.stuPhone" id = "stu_name"></td>
                <td>手機號碼:</td>
                <td><input type = "text" name = "stuInfor.stuTelephone" id = "stu_name"></td>
               </tr>
                   <tr>
                   <td>QQ號碼:</td>
                   <td><input type = "text" name = "stuInfor.stuQq" id = "stu_name"></td>
                <td>電子郵箱:</td>
                <td><input type = "text" name = "stuInfor.stuEmail" id = "stu_name"></td>
               </tr>
               <tr>
                   <td>通信地址：</td>
                   <td><input type = "text" name = "stuInfor.stuCommAddress" id = "stu_name"></td>
                <td>家庭地址:</td>
                <td><input type = "text" name = "stuInfor.stuAddress" id = "stu_name"></td>
               </tr>
               <tr>
                   <td>頭像上傳：</td>
                   <td><input type = "file" name = "upload" id = "upload"></td>
               </tr>
</table>
<input type = "submit" name = "test" value = "確定存儲">
<input type = "button" name = "test" value = "返回列表" onclick = "showAddBatchSub(0, 'inforListAction.action');">
</form>

調用到的js：

function checkAdd(form){
    var options = { 
            dataType: 'json',
            success: inforAddResponse 
    };
    $("#inforAddForm").ajaxSubmit(options); 
    return false;
}
//回調
function inforAddResponse(responseText){
  alert(responseText.msg);
}

后台的操作時一樣的