struts2中使用ajax so easy!!!

來源:互聯網
上載者:User

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

背景操作時一樣的

 

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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