如何使用 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>