时间戳

首页 > 解决方案 > 成功的 .ajax() POST 不会将变量传递给 PHP

php - 成功的 .ajax() POST 不会将变量传递给 PHP

问题描述

我知道这个问题已经发布，但我没有看到任何有助于解决我的问题的东西。

尝试发布表单数据，然后在 PHP 中使用 mysqli，用数据更新 SQL 表。POST 成功并返回代码 200。出于某种原因（我假设存在时间问题，但不确定）PHP 变量始终未定义。我没有收到任何错误，但我可以看到响应中未定义 PHP 变量。

我通过 display_employee.php 进行部署。它显示员工姓名的下拉列表。可以选择员工并编辑他们的信息。

emp_edit.php：

<?php
include '../part1/DBConnection.php';
if($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (!($result = $conn->prepare("UPDATE employees SET emp_firstName=?, emp_lastName=?, emp_middleName=?, emp_type=?, emp_initialLevel=?, emp_hireDate=?, emp_gender=?, emp_birthDate=?, emp_passwd=? WHERE emp_id=?"))) {
    echo "Prepare failed: (" . $result->errno . ") " . $result->error;
  }

 if (!$result->bind_param("isssssssss", $emp_id, $emp_firstName, $emp_lastName, $emp_middleName, $emp_type, $emp_initialLevel, $emp_hireDate, $emp_gender, $emp_birthDate, $emp_passwd)) {
        echo "Binding parameters failed: (" . $result->errno . ") " . $result->error;
      }


  // populate param vars
  if (isset($_POST['emp_id_edit'])) {
    $emp_id = $_POST['emp_id_edit'];
  }
  if (isset($_POST['emp_firstName_edit'])) {
    $emp_firstName = $_POST['emp_firstName_edit'];
  }
  if (isset($_POST['emp_lastName_edit'])) {
    $emp_lastName = $_POST['emp_lastName_edit'];
  }
  if (isset($_POST['emp_middleName_edit'])) {
    $emp_middleName = $_POST['emp_middleName_edit'];
  }
  if (isset($_POST['emp_type_edit'])) {
    $emp_type = $_POST['emp_type_edit'];
  }
  if (isset($_POST['emp_initialLevel_edit'])) {
    $emp_initialLevel = $_POST['emp_initialLevel_edit'];
  }  
  if (isset($_POST['emp_hireDate_edit'])) {
    $emp_hireDate = $_POST['emp_hireDate_edit'];
  }
  if (isset($_POST['emp_gender_edit'])) {
    $emp_gender = $_POST['emp_gender_edit'];
  }
  if (isset($_POST['emp_birthDate_edit'])) {
    $emp_birthDate = $_POST['emp_birthDate_edit'];
  }
  if (isset($_POST['emp_passwd_edit'])) {
    $emp_passwd = $_POST['emp_passwd_edit'];
  }

  if (!$result->execute()) {
    echo "Execute failed: (" . $result->errno . ") " . $result->error;
  }
  else if($result->execute()) {
    echo "result: " . $emp_id;
  }
  $conn->close();
}

display_employee.php：

<?php
session_start();
include '../part1/DBConnection.php';
?>
<html>
<head>
  <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
  <script src="js/script.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="drop_list">
    <p> Choose an employee </p>
  </div>

  <div id="button_container">
    <button id="emp_edit">Edit Data</button>
    <button id="emp_add">>Add Employee</button>
    <div id="input_fields"></div>

</body>    
</html>

ajaxfile.php：

<?php
include "../part1/DBConnection.php";
$return_arr = array();
$query = "SELECT emp_id, emp_firstName, emp_lastName FROM employees ORDER BY emp_id";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
    $emp_id = $row['emp_id'];
    $emp_firstName = $row['emp_firstName'];
    $emp_lastName = $row['emp_lastName'];

    $return_arr[] = array(
        "emp_id" => $emp_id,
        "emp_firstName" => $emp_firstName,
        "emp_lastName" => $emp_lastName

    );
}
// Encoding array in JSON format
echo json_encode($return_arr);

jQuery 脚本：

$(document).ready(function () {
    $.ajax({
        url: 'ajaxfile.php',
        type: 'get',
        dataType: 'JSON',
        success: function (response) {
            var len = response.length;
            var output = "<select id = 'selection'>"
            for (var i = 0; i < len; i++) {
                var emp_id = response[i].emp_id;
                var emp_firstName = response[i].emp_firstName;
                var emp_lastName = response[i].emp_lastName;
                output += "<option value='" + emp_id + "' name='" + emp_id + "'>" + emp_id + " " + emp_firstName + " " + emp_lastName + "</option>";
            }
            $("#drop_list").append(output);
            $("#drop_list").append("</select>");
        }
    });
});

$(document).ready(function () {
    $('#emp_add').on('click', function () {
        $("#emp_edit").removeAttr("disabled");
        $("#emp_add").attr("disabled", "disabled");
        $("#input_fields").empty();
        var input_fields = "<form id='emp_add_form' name='form1' method='post'><label for='emp_firstName_add'>First Name</label><input type='text' class='input_fields' id='emp_firstName_add' name='emp_firstName_add'></br><label for='emp_middleName_add'>Middle Name</label><input type='text' class='input_fields' id='emp_middleName_add' name='emp_middleName_add'></br><label for='emp_lastName_add'>Last Name</label><input type='text' class='input_fields' id='emp_lastName_add' name='emp_lastName_add'></br><label for='emp_type_add'>Type</label><input type='text' class='input_fields' id='emp_type_add' name='emp_type_add'></br><label for='emp_initialLevel_add'>Initial Level</label><input type='text' class='input_fields' id='emp_initialLevel_add' name='emp_initialLevel_add'></br><label for='emp_hireDate_add'>Hire Date</label><input type='date' class='input_fields' id='emp_hireDate_add' name='emp_hireDate_add'></br><label for='emp_gender_add'>Gender</label><input type='text' class='input_fields' id='emp_gender_add' name='emp_gender_add'></br><label for='emp_birthDate_add'>Birth Date</label><input type='date' class='input_fields' id='emp_birthDate_add' name='emp_birthDate_add'></br><label for='emp_passwd_add'>Password</label><input type='text' class='input_fields' id='emp_passwd_add' name='emp_passwd_add'></br><input type='button' name='add_btn' value='Add to database' id='add_btn'></form>"
        $("#input_fields").append(input_fields);

        $('#add_btn').on('click', function (e) {
            var emp_firstName = $('#emp_firstName_add').val();
            var emp_lastName = $('#emp_lastName_add').val();
            var emp_middleName = $('#emp_middleName_add').val();
            var emp_type = $('#emp_type_add').val();
            var emp_initialLevel = $('#emp_initialLevel_add').val();
            var emp_hireDate = $('#emp_hireDate_add').val();
            var emp_gender = $('#emp_gender_add').val();
            var emp_birthDate = $('#emp_birthDate_add').val();
            var emp_passwd = $('#emp_passwd_add').val();

            if (emp_firstName != "" && emp_lastName != "" && emp_initialLevel != "" && emp_hireDate != "" && emp_gender != "" && emp_birthDate != "") {
                e.preventDefault()
                $.ajax({
                    url: "emp_add.php",
                    type: "POST",
                    data: {
                        emp_firstName: emp_firstName,
                        emp_lastName: emp_lastName,
                        emp_middleName: emp_middleName,
                        emp_type: emp_type,
                        emp_initialLevel: emp_initialLevel,
                        emp_hireDate: emp_hireDate,
                        emp_gender: emp_gender,
                        emp_birthDate: emp_birthDate,
                        emp_passwd: emp_passwd
                    },
                    cache: false,
                    success: function (dataResult) {
                        $("#emp_add").removeAttr("disabled");
                        $("#input_fields").empty();
                        $('#input_fields').append('<p>Data added successfully !</p>');
                    }
                });
            }
            else {
                alert('Please fill all the required fields !');
            }
        });
    });
});

$(document).ready(function () {
    $('#emp_edit').on('click', function () {
        $("#emp_add").removeAttr("disabled");
        $("#emp_edit").attr("disabled", "disabled");
        $("#input_fields").empty();
        var input_fields = "<form id='emp_edit_form' name='form2' method='post'><label for='emp_id_edit'>ID</label><input type='text' class='input_fields' id='emp_id_edit' name='emp_id_edit' value=" + $('#selection').val() + " readonly></br><label for='emp_firstName_edit'>First Name</label><input type='text' class='input_fields' id='emp_firstName_edit' name='emp_firstName_edit'></br><label for='emp_middleName_edit'>Middle Name</label><input type='text' class='input_fields' id='emp_middleName_edit' name='emp_middleName_edit'></br><label for='emp_lastName_edit'>Last Name</label><input type='text' class='input_fields' id='emp_lastName_edit' name='emp_lastName_edit'></br><label for='emp_type_edit'>Type</label><input type='text' class='input_fields' id='emp_type_edit' name='emp_type_edit'></br><label for='emp_initialLevel_edit'>Initial Level</label><input type='text' class='input_fields' id='emp_initialLevel_edit' name='emp_initialLevel_edit'></br><label for='emp_hireDate_edit'>Hire Date</label><input type='date' class='input_fields' id='emp_hireDate_edit' name='emp_hireDate_edit'></br><label for='emp_gender_edit'>Gender</label><input type='text' class='input_fields' id='emp_gender_edit' name='emp_gender_edit'></br><label for='emp_birthDate_edit'>Birth Date</label><input type='date' class='input_fields' id='emp_birthDate_edit' name='emp_birthDate_edit'></br><label for='emp_passwd_edit'>Password</label><input type='text' class='input_fields' id='emp_passwd_edit' name='emp_passwd_edit'></br><input type='submit' name='edit_btn' value='Edit Data' id='edit_btn'></form>"
        $("#input_fields").append(input_fields);

        $('#edit_btn').on('click', function (e) {
            var emp_id = $("#selection").val();
            var emp_firstName = $('#emp_firstName_edit').val();
            var emp_lastName = $('#emp_lastName_edit').val();
            var emp_middleName = $('#emp_middleName_edit').val();
            var emp_type = $('#emp_type_edit').val();
            var emp_initialLevel = $('#emp_initialLevel_edit').val();
            var emp_hireDate = $('#emp_hireDate_edit').val();
            var emp_gender = $('#emp_gender_edit').val();
            var emp_birthDate = $('#emp_birthDate_edit').val();
            var emp_passwd = $('#emp_passwd_edit').val();

            if (emp_firstName != "" && emp_lastName != "" && emp_initialLevel != "" && emp_hireDate != "" && emp_gender != "" && emp_birthDate != "") {
                e.preventDefault()
                $.ajax({
                    url: "emp_edit.php",
                    type: "POST",
                    data: {
                        emp_firstName: emp_firstName,
                        emp_lastName: emp_lastName,
                        emp_middleName: emp_middleName,
                        emp_type: emp_type,
                        emp_initialLevel: emp_initialLevel,
                        emp_hireDate: emp_hireDate,
                        emp_gender: emp_gender,
                        emp_birthDate: emp_birthDate,
                        emp_passwd: emp_passwd
                    },
                    cache: false,
                    success: function () {
                        $("#emp_edit").removeAttr("disabled");
                        $("#input_fields").empty();
                        $("#selection option:selected").text(emp_id + " " + emp_firstName + " " + emp_lastName);
                        $('#input_fields').append('<p>Data edited successfully!</p>');
                    }
                });
            }
            else {
                alert('Please fill all the required fields !');
            }
        });
    });
});

请求标头：

POST /group12_project/part2/emp_edit.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Content-Length: 167
Origin: http://localhost
Connection: keep-alive
Referer: http://localhost/group12_project/part2/display_employee.php
Cookie: PHPSESSID=n5tds5287ctojoils5r6h21blb

响应标头：

HTTP/1.1 200 OK
Date: Fri, 12 Mar 2021 19:15:41 GMT
Server: Apache/2.4.41 (Ubuntu)
Content-Length: 8
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

这是请求有效负载：

emp_id=1&emp_firstName=123&emp_lastName=123&emp_middleName=123&emp_type=23&emp_initialLevel=123&emp_hireDate=2021-03-12&emp_gender=123&emp_birthDate=2021-03-09&emp_passwd=23

响应正文应导致在表单中输入的 ID 和密码值。这些是空的，没有错误说变量未定义。让我知道我是否可以提供任何其他信息。

标签： phphtmljqueryajaxmysqli

解决方案

查看您在评论中添加的请求参数： emp_firstName=123&emp_lastName=123&emp_middleName=123&emp_type=1&emp_initialLevel=2&emp_hireDate=2021-03-10&emp_gender=123&emp_birthDate=2021-03-02&emp_passwd=123. This is the request payload, assuming that is what you mean. I will try that line in PHP as well. – bender_matt 11 mins ago

我没有看到emp_id_edit是在 $_POST 中设置的。这就是代码返回的原因result:

我相信您可能错过了在编辑代码中发送它：

$(document).ready(function () {
    $('#emp_edit').on('click', function () {
        $("#emp_add").removeAttr("disabled");
        $("#emp_edit").attr("disabled", "disabled");
        $("#input_fields").empty();
        var input_fields = "<form id='emp_edit_form' name='form2' method='post'><label for='emp_id_edit'>ID</label><input type='text' class='input_fields' id='emp_id_edit' name='emp_id_edit' value=" + $('#selection').val() + " readonly></br><label for='emp_firstName_edit'>First Name</label><input type='text' class='input_fields' id='emp_firstName_edit' name='emp_firstName_edit'></br><label for='emp_middleName_edit'>Middle Name</label><input type='text' class='input_fields' id='emp_middleName_edit' name='emp_middleName_edit'></br><label for='emp_lastName_edit'>Last Name</label><input type='text' class='input_fields' id='emp_lastName_edit' name='emp_lastName_edit'></br><label for='emp_type_edit'>Type</label><input type='text' class='input_fields' id='emp_type_edit' name='emp_type_edit'></br><label for='emp_initialLevel_edit'>Initial Level</label><input type='text' class='input_fields' id='emp_initialLevel_edit' name='emp_initialLevel_edit'></br><label for='emp_hireDate_edit'>Hire Date</label><input type='date' class='input_fields' id='emp_hireDate_edit' name='emp_hireDate_edit'></br><label for='emp_gender_edit'>Gender</label><input type='text' class='input_fields' id='emp_gender_edit' name='emp_gender_edit'></br><label for='emp_birthDate_edit'>Birth Date</label><input type='date' class='input_fields' id='emp_birthDate_edit' name='emp_birthDate_edit'></br><label for='emp_passwd_edit'>Password</label><input type='text' class='input_fields' id='emp_passwd_edit' name='emp_passwd_edit'></br><input type='submit' name='edit_btn' value='Edit Data' id='edit_btn'></form>"
        $("#input_fields").append(input_fields);

        $('#edit_btn').on('click', function (e) {
            var emp_id = $("#selection").val();
            var emp_firstName = $('#emp_firstName_edit').val();
            var emp_lastName = $('#emp_lastName_edit').val();
            var emp_middleName = $('#emp_middleName_edit').val();
            var emp_type = $('#emp_type_edit').val();
            var emp_initialLevel = $('#emp_initialLevel_edit').val();
            var emp_hireDate = $('#emp_hireDate_edit').val();
            var emp_gender = $('#emp_gender_edit').val();
            var emp_birthDate = $('#emp_birthDate_edit').val();
            var emp_passwd = $('#emp_passwd_edit').val();

            if (emp_firstName != "" && emp_lastName != "" && emp_initialLevel != "" && emp_hireDate != "" && emp_gender != "" && emp_birthDate != "") {
                e.preventDefault()
                $.ajax({
                    url: "emp_edit.php",
                    type: "POST",
                    data: {
                        emp_id_edit: emp_id,
                        emp_firstName: emp_firstName,
                        emp_lastName: emp_lastName,
                        emp_middleName: emp_middleName,
                        emp_type: emp_type,
                        emp_initialLevel: emp_initialLevel,
                        emp_hireDate: emp_hireDate,
                        emp_gender: emp_gender,
                        emp_birthDate: emp_birthDate,
                        emp_passwd: emp_passwd
                    },
                    cache: false,
                    success: function () {
                        $("#emp_edit").removeAttr("disabled");
                        $("#input_fields").empty();
                        $("#selection option:selected").text(emp_id + " " + emp_firstName + " " + emp_lastName);
                        $('#input_fields').append('<p>Data edited successfully!</p>');
                    }
                });
            }
            else {
                alert('Please fill all the required fields !');
            }
        });
    });

推荐阅读