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);}

背景操作時一樣的