如何使用 AJAX POST 提交按鈕值？

Question

我嘗試了各種方法，但找不到答案。

$("#sub1").click(function() {
  $.post($("#pro_update").attr("action"),
    $("#pro_update :input").serializeArray(),
    $("#sub1").attr("name"), function(info) {
      $("#result").html(info);
    });
  clearInput();
}); 

<form id='pro_update' action='updatephp/updateprocess.php' method='POST'>
  <header>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 col-sm-12'>
          <img src='images/tm-easy-profile.jpg' class='img-responsive img-circle tm-border' alt='templatemo easy profile'>
          <hr>
          <h1 class='tm-title bold shadow'>Hi,<input type='text' Placeholder='name' name='Name'></h1>
          <input type='text' Placeholder='Your Field' name='Job'>
          <button class='tm-title bold shadow' id='sub1' name='action1' value='update_personalbt'>submit</button>
          <span id='result'></span>
        </div>
      </div>
    </div>
  </header>
</form>

Answer 1

與提交按鈕關聯的數據僅在用於提交表單時與表單數據一起發送。

通過攔截提交並使用 Ajax，您沒有使用提交按鈕，因此它不包含在數據中。

使用<input type="hidden">代替。 這將始終是一個成功的控件並包含在表單數據中（即使您使用serializeArray ）。

您的示例僅包含一個提交按鈕，因此您可以對名稱和值或隱藏輸入進行硬編碼。

如果您有多個提交按鈕並且需要確定用於提交表單的按鈕，那么您可以向每個click添加click事件處理程序，以更新隱藏輸入的值。

Answer 2

更新

var data = $.extend({}, $("#pro_update :input").serializeArray(), {action1: $('[name=action1]').val()};

 $(document).ready(function() { $('#pro_update').submit(function(e) { e.preventDefault(); $.post($("#pro_update").attr("action"), data, $("#sub1").attr("name"), function(info) { $("#result").html(info); }); clearInput(); return false; }); });

 <form id='pro_update' action='updatephp/updateprocess.php' method='POST'> <header> <div class='container'> <div class='row'> <div class='col-md-12 col-sm-12'> <img src='images/tm-easy-profile.jpg' class='img-responsive img-circle tm-border' alt='templatemo easy profile'> <hr> <h1 class='tm-title bold shadow'>Hi,<input type='text' Placeholder='name' name='Name'></h1> <input type='text' Placeholder='Your Field' name='Job'> <button class='tm-title bold shadow' id='sub1' name='action1' value='update_personalbt'>submit</button> <span id='result'></span> </div> </div> </div> </header> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>