Layui同一個表單中放置兩個按鈕，送出問題

今天做項目遇到了這個問題，看到layui社群有人問，但沒有答案，自己就想了一個辦法：

原理：用兩個按鈕，一個按鈕設定送出方式為Post，一個為Get，這樣你就可以通過控制器端不同的接受請求方式，來實作不同的業務

核心代碼如下：

頁面上預設寫寫post請求：

第一個按鈕post請求：

對應的按鈕“發起督辦”：<button class="layui-btn" lay-submit lay-filter="first">發起督辦</button>

點選發起督辦，執行的是post請求。

第二個按鈕get請求：

隻需要加上這個：formmethod="get"，你點選之後他就會将請求方式變為get請求

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="utf-8">
 <title>發起督辦</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" th:href="@{../layui/css/layui.css}" target="_blank" rel="external nofollow"  media="all">
<link href="favicon.ico" target="_blank" rel="external nofollow"  rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>
<body>
<form class="layui-form layui-form-pane1" action="/superVision/toAddSuperVision" method="post" lay-filter="first">	
  <div class="layui-form-item">
    <label class="layui-form-label">督辦标題</label>
    <div class="layui-input-block">
      <input type="text" name="svTitle" lay-verify="title" autocomplete="off" placeholder="請輸入督辦标題" class="layui-input">
  </div>
  </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">督辦内容</label>
    <div class="layui-input-block">
      <textarea placeholder="請輸入内容" class="layui-textarea" name="svContent"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">部門類型</label>
    <div class="layui-input-block">
       <select name="did" lay-filter="aihao"> 
        <option th:each="dept,userStat:${depts}" th:value="${dept?.did}" th:text="${dept?.dname}"></option>
      </select> 
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">督查類型</label>
    <div class="layui-input-block">
       <select name="sid" lay-filter="aihao"> 
        <option th:each="superVisionType,userStat:${superVisionTypes}" th:value="${superVisionType.sid}" th:text="${superVisionType.sname}"></option>
      </select> 
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">開始時間</label>
  <div class="layui-inline">
	  <input type="text" name="startTime" class="layui-input" id="test6-1">
  </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">簽收時間</label>
  <div class="layui-inline">
	  <input type="text" name="confirmTime" class="layui-input" id="test6-3">
  </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">結束時間</label>
	  <div class="layui-inline">
		  <input type="text" name="endTime" class="layui-input" id="test6-2">
	  </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">通知分管上司</label>
    <div class="layui-input-block">
      <input type="radio" name="sendLeader" value="通知" title="通知">
      <input type="radio" name="sendLeader" value="不通知" title="不通知" checked>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">設定回複次數</label>
    <div class="layui-input-block">
      <select name="replices" >
      	<option value="1">請選擇</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>
  </div>
  <input type="hidden" name="state">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="first">發起督辦</button>
      <button class="layui-btn2" lay-submit lay-filter="second" formmethod="get">存為草稿</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //自定義背景色主題
  laydate.render({
    elem: '#test6-2' //指定元素
    ,type: 'datetime'
    ,theme: '#393D49'
    //,range: true
    ,trigger: 'click'
  });
  //自定義背景色主題
  laydate.render({
    elem: '#test6-3' //指定元素
    ,type: 'datetime'
    ,theme: '#393D49'
    //,range: true
    ,trigger: 'click'
  });
  //自定義背景色主題
  laydate.render({
    elem: '#test6-1' //指定元素
    ,type: 'datetime'
    ,theme: '#393D49'
    //,range: true
    ,trigger: 'click'
  });
  
  
});

</script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //建立一個編輯器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定義驗證規則
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标題至少得5個字元啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密碼必須6到12位，且不能出現空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //監聽指定開關
  form.on('switch(switchTest)', function(data){
    layer.msg('開關checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('溫馨提示：請注意開關狀态的文字可以随意定義，而不僅僅是ON|OFF', data.othis)
  });
  
  //監聽送出
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最終的送出資訊'
    })
    return false;
  });
 
  //表單初始指派
  form.val('example', {
    "username": "賢心" // "name": "value"
    ,"password": "123456"
    ,"interest": 1
    ,"like[write]": true //複選框選中狀态
    ,"close": true //開關狀态
    ,"sex": "女"
    ,"desc": "我愛 layui"
  })
  
  
});
</script>
</body>
</html>

控制器端處理：

@PostMapping("/toAddSuperVision")
	public String toAddSuperVision(SuperVision superVision,int sid,int did) {
		SupervisionType supervisionType=new SupervisionType();
		supervisionType.setSid(sid);
		superVision.setSupervisionType(supervisionType);
		
		Dept dept=new Dept();
		dept.setDid(did);
		superVision.setDept(dept);
		//發起督辦時修改其狀态為“已發起狀态”
		SuperVisionState superVisionState=new SuperVisionState();
		System.out.println("設定狀态為2");
		superVisionState.setStid(2);
		superVision.setSuperVisionState(superVisionState);
		superVisionService.save(superVision);
		return "superVision";
		
	}
	@GetMapping("/toAddSuperVision")
	public String toAddSuperVision1(SuperVision superVision,int sid,int did) {
		SupervisionType supervisionType=new SupervisionType();
		supervisionType.setSid(sid);
		superVision.setSupervisionType(supervisionType);
		Dept dept=new Dept();
		dept.setDid(did);
		superVision.setDept(dept);
		//發起督辦時修改其狀态為“已發起狀态”
		SuperVisionState superVisionState=new SuperVisionState();
		System.out.println("設定狀态為1");
		superVisionState.setStid(1);
		superVision.setSuperVisionState(superVisionState);
		superVisionService.save(superVision);
		return "superVision";
		
	}

通過請求方式的不同執行不同的業務。

我的問題解決了。。。但根本想解決還需要更好的方法

Layui同一個表單中放置兩個按鈕，送出問題

繼續閱讀

android中怎麼儲存checkbox中的checked屬性_第二十四天HTML中的form表單

antd vue form 手動校驗_chaso-form：基于Vue和ElementUI的配置式表單元件

antd vue form 手動校驗_三分鐘為你細數 Vue el-form 表單校驗的坑點背景el-form 的 model 屬性el-from-item 的 prop 屬性多表單校驗非直接子屬性的校驗問題啟示錄

傑普實訓（前端）第二天知識點總結

打地鼠小遊戲

angular form表單送出資料

angular使用表單form綁定formGroup屬性報錯：Can't bind to 'formGroup' since it isn't a known property of 'form'

JVS低代碼表單引擎系列：jvs-form表單如何與邏輯引擎關聯？

JVS低代碼表單引擎系列：jvs-form表單支援哪幾種樣式？

Spring MVC接收前台form表單送出資料的亂碼問題

jquery 回車事件會觸發頁面重新整理，自動送出表單

實訓日記2021/7/6

Part3 designreport

form表單序列化與對象裝填form表單

layer送出圖檔與form表單同時送出資料

【實訓】 QT調試——簡易電腦一、設定斷點二、單步調試三、一些在編寫簡易電腦中出現的代碼調試