ajax前後端分離，頁面之間傳值

知識 10-28

在前後端分離書寫中難免會遇到一個list頁面點擊修改操作需要傳值的問題，那麼我們如何進行傳值和在列一個頁面進行接受參數與後台交互呢？

下面書寫一個修改操作的傳值

<!DOCTYPE html>

<html>

<head>

<title>Project</title>

</head>

$(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 stylex="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>

<li>多功能表格</li>

</ul>

</ul>

</div>

test

</div>

</div>

<strong>信息：</strong>這裡可以放置表單提交反饋信息通知等！

</div>

<!-- <div class="dropdown" >

</ul>

</div> -->

</div>

</span>

</div>

</form>

</ul>

</li>

</ul>

</div>

<tr>

</tr>

<!-- <tr>

</tr> -->

</tbody>

</table>

</div>

</ul>

<hr>

<p class="pull-right"><a href="#" target="_blank">自動化辦公信息系統</a></p>

</footer>

</div>

</div>

<p class="error-text"><i class="fa fa-warning-sign modal-icon"></i>你確定要刪除嗎？</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

//$(".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>

<title>Project</title>

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>

</head>

$(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>

<li>OLT管理</li>

<li>新增OLT信息</li>

</ul>

</ul>

</div>

test

</div>

</div>

<strong>信息：</strong>這裡可以放置表單提交反饋信息通知等！

</div>

<!--

<div class="toolbar-wrap">搜索按鈕結合體 start

<ul class="nav navbar-nav navbar-right" stylex="display: none;">備份鏈接

</ul>

</li>

</ul>

</div> -->

<tr>

</tr>

<tr>

</select></td>

</tr>

<tr>

<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>

</tr>

</table><br>

</div>

</div>

<hr>

<p class="pull-right"><a href="#" target="_blank">自動化辦公信息系統</a></p>

</footer>

</div>

</div>

<p class="error-text"><i class="fa fa-warning-sign modal-icon"></i>你確定要刪除嗎？</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

//$(".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";

// }

}

一個簡單的增刪查改就這樣完成了！

ajax前後端分離，頁面之間傳值

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※ELK日誌系統之通用應用程序日誌接入方案
※利用PHPstorm進行代碼review

TAG:程序員小新人學習 |