ajax前後端分離，頁面之間傳值
阿新 • • 發佈：2019-02-16
在前後端分離書寫中難免會遇到一個list頁面點選修改操作需要傳值的問題，那麼我們如何進行傳值和在列一個頁面進行接受引數與後臺互動呢？
下面書寫一個修改操作的傳值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Project</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <script src="assets/init/loadFiles.js" type="text/javascript" charset="utf-8"></script> </head> <script type="text/javascript"> $(function(){ $.ajax({ //後臺像頁面傳值ajax type: "post", dataType: "json", contentType: "application/json;charset=utf-8", url: "/getAll", success: function (list) { alert("操作成功") var data = list; for (var i= 0;i<data.length;i++) { //動態拼接表格 var str = ""; str += "<tr>" + "<td >" + data[i].dev_name + "</td>" + "<td >" + data[i].dev_ip + "</td>" + "<td >" + data[i].manufacturer + "</td>" + "<td >" + data[i].modle + "</td>" + "<td >" + data[i].location + "</td>" + "<td >" + data[i].svlan_cmcc + "</td>" + "<td >" + data[i].svlan_cucc + "</td>" + "<td >" + data[i].svlan_ct + "</td>" + "<td >" + data[i].cvlan_num + "</td>" + "<td >" + data[i].note + "</td>" + "<td style='display:none'>" + data[i].id + "</td>" + "<td ><i class='fa fa-trash-alt fa-button' id='delid'></i> <i class='fa fa-edit fa-button' id='upid'></i></td>"+ "</tr>"; var $str=$(str); $("#oltlist").append($str); //將表格接入容器 } }, error: function () { alert("查詢失敗"); } }); /* 點選刪除事件 （）動態獲取 "#oltlist" tbatle 的標籤 ".fa-trash-alt" 通過標籤 獲取按鈕 $(this).parent().prev().html(); 當前 按鈕位置(td)的兄弟節點的上一個位置處的資料 (上一個td) input 是val() 其他是HTML（） */ $("#oltlist").on("click",".fa-trash-alt",function(){ var id = $(this).parent().prev().html(); alert(id); $.ajax({ type: "post", dataType: "json", url: "/delById", data: {"id":id}, success: function (msg) { if (msg==1) { alert("刪除成功"); window.location.href ="olt-infolist.html"; } }, error: function () { alert("刪除失敗，請稍後重試"); } }); }); /* 點選修改事件 */ $("#oltlist").on("click",".fa-edit ",function(){ //獲取id var id = $(this).parent().prev().html(); // 跳轉頁面 帶上引數id window.location.href ="olt-upolt.html?id="+id; }); }); /* 通過dom關係來獲取 $.each(json, function (i, obj) { html += '<tr><td align="center" class="col-sm-1"></td>' html += '<td align="center" class="col-sm-1" id="sn' + i + '">' + obj.staffnumber + '</td>' html += '<td align="center" class="col-sm-1">' + obj.department + '</td>' html += '<td align="center" class="col-sm-1">' + obj.post + '</td>' html += '<td align="center" class="col-sm-1">' + obj.name + '</td>' html += '<td align="center" class="col-sm-1">' + obj.sex + '</td>' html += '<td align="center" class="col-sm-1">' + obj.age + '</td>' html += '<td align="center" class="col-sm-1">' + obj.phone + '</td>' html += '<td align="center" class="col-sm-1">' + obj.idcard + '</td>' html += '<td align="center" class="col-sm-1">' + obj.entrytime + '</td>' html += '<td align="center" class="col-sm-1" id="ha"><a onclick="modify(this)">修改</a></td>' html += '<td align="center" class="col-sm-1"></td></tr>' }) $('#result').append(html); window.modify = function (a) { var tr = a.parentNode.parentNode;//獲取a的父節點td，在獲取td父節點得到tr alert(tr.cells[1].innerHTML)//staffnumber //獲取tr陣列的索引為1的值 即obj.department的值 alert(tr.cells[2].innerHTML)//department ///...其他同行列值 } */ </script> <body> <div class="top-bar"> <ul class="breadcrumb top-breadcrumb"> <li><i class="fa fa-home"></i></li> <li>工作臺</li> <li>表格樣式</li> <li>多功能表格</li> </ul> <ul class="top-toolbar"> </ul> </div> <div class="main-wrap"> <div class="panel panel-line" style="display:none;"> <div class="panel-heading"> test <span class="desc bg-blue"></span> </div> <div class="panel-body"> <div class="row"> <div class="col-mark col-xs-4 col-sm-3 col-md-3 col-lg-2 theme-16"></div> </div> </div> </div> <div class="alert alert-info" > <button type="button" class="close" data-dismiss="alert">×</button> <strong>資訊：</strong>這裡可以放置表單提交反饋資訊通知等！ </div> <div class="toolbar-wrap"><!--搜尋按鈕結合體 start--> <div class=" navbar-form navbar-left"> <!-- <button class="btn btn-default" ><span class="fa fa-check-square"></span> 全選</button> --> <!--onclick="window.location='olt-addolt.html'"點選按鈕頁面跳轉 --> <button class="btn btn-default" onclick="window.location='olt-addolt.html'"><span class="fa fa-file"></span> 新建</button> <!-- <button class="btn btn-default" data-toggle="modal" data-target="#myModal"><span class="fa fa-times"></span> 刪除</button> --> <button class="btn btn-default" onclick="window.location='olt-infolist.html'" ><span class="fa fa-sync-alt"></span> 重新整理</button> <!-- <div class="dropdown" > <button type="button" class="btn btn-default" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">表單操作 <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#"> 全選</a></li> <li><a href="#">重新整理</a></li> <li><a href="#">新建</a></li> <li class="divider"></li> <li><a href="#">批量編輯</a></li> <li class="divider"></li> <li><a href="#">刪除</a></li> </ul> </div> --> </div> <form class="navbar-form navbar-right" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="請輸入關鍵字"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜尋</button> </span> </div> </form> <ul class="nav navbar-nav navbar-right" style="display: none;"><!--備份連結--> <li><a href="#">測試連結</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">下拉選單 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">刪除</a></li> <li><a href="#">關閉</a></li> <li class="divider"></li> <li><a href="#">取消</a></li> </ul> </li> </ul> </div><!--搜尋按鈕結合體 end--> <div class="well well-simple"> <table class="table table-hover table-striped " border="1px"> <tr> <th>裝置姓名</th> <th>裝置ip</th> <th>廠家</th> <th>型號</th> <th>位置</th> <th>移動</th> <th>聯通</th> <th>電信</th> <th>數量</th> <th>備註</th> <th>操作</th> </tr> <tbody id="oltlist"> <!-- <tr> <td><i class="fa fa-trash-alt fa-button"></i><i class="fa fa-edit fa-button"></i></td> </tr> --> </tbody> </table> </div> <ul class="pagination"> <li><a href="#">上一頁</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">...</a></li> <li><a href="#">22</a></li> <li><a href="#">下一頁</a></li> </ul> <footer> <hr> <p class="pull-right"><a href="#" target="_blank">自動化辦公資訊系統</a></p> <p>© 2015 <a href="#" target="_blank">aYin</a></p> </footer> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">刪除確認</h4> </div> <div class="modal-body"> <p class="error-text"><i class="fa fa-warning-sign modal-icon"></i>你確定要刪除嗎？</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-danger">刪除</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html> <script type="text/javascript"> //$('.demo-cancel-click').click(function(){return false;}); $(function(){ $(".data-time").datetimepicker({ minView:'month', //maxView:"year", format: "dd MM yyyy - HH:ii P", showMeridian: true, language: 'zh-CN', format: "yyyy-mm-dd", autoclose: true, viewSelect:'month', todayBtn: true, pickerPosition: "bottom-left" }); $(".form_datetime").datetimepicker({ format: "dd MM yyyy - hh:ii" }); $(".themeSwitch div").interaction({type:"radio"}); $(".fa-button").interaction({type:"button"}); }); </script>
在修改頁面中我們向其他頁面傳了一個id進行操作，那麼我們在列一個頁面如何操作 呢?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Project</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <style type="text/css"> select{ border-radius:4px; border-color:#ccc; width: 100%; height: 35px; line-height: 35px; padding-left: 10px; } #note{width: 100%;border-radius:4px;border-color:#ccc;} #bottombutten{margin-left: 350px;} </style> <script src="assets/init/loadFiles.js" type="text/javascript" charset="utf-8"></script> </head> <script type="text/javascript"> $(function(){ /* 獲取跳轉頁面帶來的id資料 */ var url=window.location.search; //獲取url中"?"符後的字串 var oltid = url.substr(url.indexOf("=")+1); alert(oltid); $.ajax({ type:"post", dataType:"json", url:"/upolt", data:{"id":oltid}, success:function (springBootOtl) { //alert(springBootOtl); var data=springBootOtl; $("#dev_name").val(data.dev_name); $("#dev_ip").val(data.dev_ip); $("#manufacturer").val(data.manufacturer); $("#modle").val(data.modle); $("#location").val(data.location); $("#svlan_cmcc").val(data.svlan_cmcc); $("#svlan_cucc").val(data.svlan_cucc); $("#svlan_ct").val(data.svlan_ct); $("#cvlan_num").val(data.cvlan_num); $("#note").val(data.note); }, error:function () { alert("查詢失敗"); } }); /* 獲取表單資料 封裝 */ $("#up_btn").click( function(){ var dev_name = ($("#dev_name").val()); var dev_ip = ($("#dev_ip").val()); var manufacturer = ($("#manufacturer").val()); var modle = ($("#modle").val()); var location = ($("#location").val()); var svlan_cmcc = ($("#svlan_cmcc").val()); var svlan_cucc = ($("#svlan_cucc").val()); var svlan_ct = ($("#svlan_ct").val()); var cvlan_num = ($("#cvlan_num").val()); var reg = /^[0-9]*$/; if(cvlan_num==null||cvlan_num ==""){ cvlan_num = 0; }else if (!reg.test(cvlan_num)) { alert("請輸入正確的客戶數量") return false } var note = ($("#note").val()); $.ajax({ type:"post", dataType:"json", url:"/upById", data:{"id":oltid, "dev_name":dev_name, "dev_ip":dev_ip, "manufacturer":manufacturer, "modle":modle, "location":location, "svlan_cmcc":svlan_cmcc, "svlan_cucc":svlan_cucc, "svlan_ct":svlan_ct, "cvlan_num":cvlan_num, "note":note}, success:function (msg){ if (msg==1){ alert("操作成功"); if(confirm("修改成功，是否返回上一層？")){ self.location=document.referrer; } } }, error:function (){ alert("修改失敗"); } }); }); }); </script> <body> <div class="top-bar"> <ul class="breadcrumb top-breadcrumb"> <li><i class="fa fa-home"></i></li> <li>OLT管理</li> <li>新增OLT資訊</li> </ul> <ul class="top-toolbar"> </ul> </div> <div class="main-wrap"> <div class="panel panel-line" style="display:none;"> <div class="panel-heading"> test <span class="desc bg-blue"></span> </div> <div class="panel-body"> <div class="row"> <div class="col-mark col-xs-4 col-sm-3 col-md-3 col-lg-2 theme-16"></div> </div> </div> </div> <div class="alert alert-info" > <button type="button" class="close" data-dismiss="alert">×</button> <strong>資訊：</strong>這裡可以放置表單提交反饋資訊通知等！ </div> <!-- <div class="toolbar-wrap">搜尋按鈕結合體 start <ul class="nav navbar-nav navbar-right" style="display: none;">備份連結 <li><a href="#">測試連結</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">下拉選單 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">刪除</a></li> <li><a href="#">關閉</a></li> <li class="divider"></li> <li><a href="#">取消</a></li> </ul> </li> </ul> </div> --><!--搜尋按鈕結合體 end--> <div class="panel panel-line"> <div class="panel-body"> <table class="table-form"> <tr> <th width="150">裝置名稱</th><td><input id ="dev_name" type="text" class="form-control" rplaceholder="請輸入裝置名稱" required="required"/></td> <th width="150">裝置IP</th><td><input id ="dev_ip" type="text" class="form-control" placeholder="請輸入裝置IP" required="required"/></td> </tr> <tr> <th>廠家</th><td > <select id ="manufacturer" > <option selected="selected" value="華為">華為</option> <option value="中興">中興</option> <option value="烽火">烽火</option> </select></td> <th>型號</th><td ><input id ="modle" type="text" class="form-control" placeholder="請輸入裝置型號" required="required"/></td> </tr> <tr> <th>位置</th><td><input id ="location" type="text" class="form-control" placeholder="請輸入位置"/></td> <th>外層vlan（移動）</th><td><input id ="svlan_cmcc" type="text" class="form-control" /></td> </tr> <tr> <th>外層vlan（聯通）</th><td ><input id ="svlan_cucc" type="text" class="form-control" /></td> <th>外層vlan（電信）</th><td ><input id ="svlan_ct" type="text" class="form-control" /></td> </tr> <tr> <th>客戶vlan數量</th><td ><input id ="cvlan_num" type="text" class="form-control" /></td> <th>備註</th><td ><textarea id ="note" id="note"></textarea></td> </tr> </table><br> <div class="col-xs-4" id="bottombutten"> <div class=" btn-group btn-group-justified opinion-button" role="group" aria-label="..."> <div class="btn-group active" role="group"> <input id="up_btn" type="button" class="btn btn-default" value="修改"></input> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" onclick="self.location=document.referrer;">返回</button> </div> </div> </div> </div> </div> <footer> <hr> <p class="pull-right"><a href="#" target="_blank">自動化辦公資訊系統</a></p> <p>© 2015 <a href="#" target="_blank">aYin</a></p> </footer> </div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">刪除確認</h4> </div> <div class="modal-body"> <p class="error-text"><i class="fa fa-warning-sign modal-icon"></i>你確定要刪除嗎？</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-danger">刪除</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html> <script type="text/javascript"> //$('.demo-cancel-click').click(function(){return false;}); $(function(){ $(".data-time").datetimepicker({ minView:'month', //maxView:"year", format: "dd MM yyyy - HH:ii P", showMeridian: true, language: 'zh-CN', format: "yyyy-mm-dd", autoclose: true, viewSelect:'month', todayBtn: true, pickerPosition: "bottom-left" }); $(".form_datetime").datetimepicker({ format: "dd MM yyyy - hh:ii" }); $(".themeSwitch div").interaction({type:"radio"}); $(".fa-button").interaction({type:"button"}); }); </script>
獲取值需要對url get 方式進行擷取操作 獲取自己想要的值，
那麼我們在控制層又是這麼操作的呢？、
package springBootOltPriject.olt.coltroller; import java.util.List; import org.mybatis.spring.annotation.MapperScan; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.context.annotation.ComponentScan; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import springBootOltPriject.olt.service.OltService; import springBootOltPriject.olt.vo.SpringBootOtl; @MapperScan("springBootOltPriject.olt.dao") //@Controller是這個註解可以return 頁面 @RestController @SpringBootApplication @ComponentScan("springBootOltPriject.olt.service") //@RequestMapping("/") public class CotrollerDemo { //注入OltService @Autowired private OltService oltService; //根據id查詢資料 =================================================================== //@GetMapping("/upolt") /** * * @param id * @return */ @RequestMapping(value ="/upolt") public SpringBootOtl getOltMappingById( int id) { System.out.println(id); SpringBootOtl springBootOtl= oltService.getOltMappingById(id); return springBootOtl; } ////查詢所有資料 // // @RequestMapping("/oltEdit") // public ModelAndView getAll(){ // // ModelAndView view = new ModelAndView("oltEdit"); // //查詢資料 // List<SpringBootOtl> list=oltService.getAll(); // view.addObject("list", list); // return view; // } //查詢所有資料 完成=================================================================== @RequestMapping("/getAll") public List<SpringBootOtl> getAll(){ //查詢資料 List<SpringBootOtl> list=oltService.getAll(); //測試 System.out.println(list.get(0)); return list; } //根據id刪除資料 完成 ============================================================== //@GetMapping("/delById") @RequestMapping(value="/delById") public int delById( int id){ //從資料庫刪除資料 oltService.delById(id); return 1; } //根據id跟新資料 ================================================================== //@GetMapping("/upById") @RequestMapping(value="/upById") public int upById( int id, SpringBootOtl springBootOtl ) { //跟新資料 oltService.upById(springBootOtl); return 1; } //新增資料 完成=================================================================== @RequestMapping("/save") public int save( SpringBootOtl springBootOtl){ System.out.println(springBootOtl); //儲存資料 oltService.save(springBootOtl); //return "redirect:/login"; return 1; } // @RequestMapping("/login") // public String login(Model model ) { // //查詢資料 // List<SpringBootOtl> list=oltService.getAll(); // System.out.println(list.get(0)); // model.addAttribute("list", list); // return "oltList1"; // } }
一個簡單的增刪查改就這樣完成了 ！