如何使用 ajax 和 php 检测提交的按钮？答案

【问题标题】：How do I detect submitted button with ajax and php?如何使用 ajax 和 php 检测提交的按钮？
【发布时间】：2019-07-28 19:38:44
【问题描述】：

我的前端有一个表单，当提交按钮为clicked 时，我想将详细信息发送到我的get-emp.php 文件without page reload。

代码如下所示：

index.html

<form class="form-emp-details hide" action="">

  <div class="form-group">
    <label for="">First name:</label>
    <input type="text" class="form-control input-emp-firstname" name="input_emp_firstname">
  </div>

  <div class="form-group">
    <label for="">Last name:</label>
    <input type="text" class="form-control input-emp-lastname" name="input_emp_lastname">
  </div>

  <div class="form-group">
    <label></label>
    <button type="submit" class="btn btn-default btn-submit-1" name="submit_emp_details">Save</button>
  </div>

</form>

custom.js

  $(".form-emp-details").("submit", function(e) {

    var input_first_name = $(".input-emp-firstname").val();


    $.ajax({
      type: "POST",
      url: "get-emp.php",
      data: {
        input_emp_firstname:input_first_name,     
      },
      success: function(data) {         
        console.log(data)   
      },
      error: function(xhr,status,error) {
        console.log(error);
      }
    });


  });

get-emp.php

if(isset($_POST['submit_emp_details'])) {
  $firstname = $_POST['input_emp_firstname'];
  echo $firstname;
}

我想在get-emp.php 文件中显示提交的表单数据但是我似乎无法检测到提交的按钮并在其上回显表单数据。

我的目标是使用单个请求变量或标识符 $_POST['submit_emp_details'] 捕获所有表单数据

非常感谢任何帮助。谢谢

【问题讨论】：

你没有通过submit_emp_details 来获得它，$_POST['submit_emp_details']) 所以你的代码总是返回空.. 使用if(isset($_POST['input_emp_firstname']))
@Mohamed-Yousef 我的目标是使用单个标识符 $_POST['identifier'] 获取所有表单数据。你知道怎么做吗？
看@Canon你可以使用data: $(this).serialize(),ChiKa在他的回答中说..在php上你需要遍历发布的数据print_r($_POST)

标签： javascript php jquery html laravel

【解决方案1】：

您通过以下方式传递名字和姓氏的 POST 数据：

input_emp_firstname

input_emp_lastname

所以，您需要将文件 get-emp.php 上的 $_POST['submit_emp_details'] 更改为 $_POST['input_emp_firstname']

<?php
if(isset($_POST['input_emp_firstname'])) {
  $firstname = $_POST['input_emp_firstname'];
  echo $firstname;
}

编辑 2：

$.ajax({
  type: "POST",
  url: "get-emp.php",
  cache: false,
  data: {
    submit_emp_details: {
            input_emp_firstname:input_first_name, 
            input_emp_lastname:input_last_name
    }
  },
  success: function(data) {

    console.log(data)

  },
  error: function(xhr,status,error) {
    console.log(error);
  }
});

【讨论】：

嗨。您知道如何仅使用 $_POST['submit_emp_details'] 捕获所有表单数据吗？
嗨@ConanCarroll，请检查编辑2

【解决方案2】：

$("#MyformId").submit(function(e) {

    e.preventDefault();
    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), 
           success: function(data)
           {
              // success..
           }
         });
});

【讨论】：