无法使用 AJAX 发送表单输入并获取返回值答案

【问题标题】：Can't send form input with AJAX and get a value returned无法使用 AJAX 发送表单输入并获取返回值
【发布时间】：2016-12-18 12:23:49
【问题描述】：

我尝试了here (How to Pass Variables and Data From PHP to JavaScript)和here (Submit Form Without Reloading Using jQuery AJAX)中的所有解决方案。

我想要完成的是，当我提交表单时，它会被发送到 .php 文件，而用户不会被重定向到 .php 文件或网站重新启动。

然后我希望 PHP 返回一个值，表明注册成功或失败（例如用户名太长或电子邮件不正确）。

我已经坚持了两天了，我一直在尝试多种解决方案，包括将 PHP 和 HTML 代码放在同一个文件中，并以某种方式在提交时运行 PHP 函数（它会显示错误使用 echo 和 script 标签的消息）。

HTML/JS 代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    var oReq = new XMLHttpRequest();

    function reqListener() {
      console.log(this.responseText);
    }

    $('#register').submit(function () {
      oReq.onload = function () {
        alert(this.responseText);
      };
      oReq.open("post", "registeruser.php", true);
      oReq.send();
    });
</script>
</head>
<body>
<form id="register" method="post" accept-charset="UTF-8">
  Username:<br>
  <input type="text" name="u_username" id="id_username" required><br>
  First Name:<br>
  <input type="text" name="u_first" id="id_first" required><br>
  Last Name:<br>
  <input type="text" name="u_last" id="id_last" required><br>
  <input type="submit" value="SUBMIT!">
</form>
</body>
</html>

PHP 代码：

<?php

echo "Starting<br>";

submitRegister();

function submitRegister() {
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
error_reporting(E_ALL);
ini_set('display_errors',1);

function displayAlert($message) {
    echo $json_encode($message);
    die();
}

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $username = $_POST['u_username'];
        $pwd = $_POST['u_firstname'];
        $pwdconfirm = $_POST['u_lastname']);
        // And here go tons of other things like sql/validation/sanitization etc.
        displayAlert("Done.");
    }
    else {
        displayAlert("Failed.");
    }
?>

是的，我知道 AJAX 代码非常糟糕且无效，尽管我似乎无法找出原因。

【问题讨论】：

您已经在加载 jQuery - 为什么不使用 jQuery 的 $.post-method（或者只是 $.ajax）？而不是使用常规的 js ajax。
使用 jQuery 让您的生活更轻松。

标签： php jquery ajax forms php-7

【解决方案1】：

既然您已经在加载 jQuery，为什么不直接使用 jQuery？（我使用#register_submit 作为点击功能的 id，这意味着您需要将该 id 添加到表单中的提交中）

$(document).ready(function() {
 $('#register_submit').click(function(e) {
  e.preventDefault();
  $.post('registeruser.php',$('#register').serialize(),function(data) {
    //parse return data here
  }
 });
});

【讨论】：

我用alert(this.responseText); 替换了“在此处解析返回数据”注释（也尝试了$('#register').onload，但没有成功）。当我使用this.responseText 执行此操作时，我总是在警报框中得到“未定义”（也尝试了this.message，当我单击提交按钮时出现 10 秒的暂停，然后是未定义的消息）。
首先，返回数据在函数中命名为data，而且您从 php 文件返回的内容可能不会正确返回 - 看看您通过控制台返回的内容浏览器。在发送 json 编码的字符串之前回显某些内容并不能真正起作用。此外，您没有命名 json 元素，因此您返回的 json 基本上是“完成”或“失败”，没有命名键。
this.data 返回 'field1=value1&field2=value2&field3=value3'，但是我必须用什么替换 this.data 才能显示实际消息？当我在 Chrome 中打开开发工具并转到网络选项卡时，记录我提交 registeruser.php，单击它并转到“响应”选项卡，消息就在那里。所以我相信必须有一种方法来展示它？尝试使用 responseText 返回“未定义”。
那么就用data.name_of_field

【解决方案2】：

您可以使用以下方法：

在 HTML 页面上，调用 PHP 页面。并解析 json ajax 响应，分析具体的返回码。例如：
- {code: 0, message: "Success"}
- {code: 1, message: "Generic error message : failed"}
- {code: 4: message: "Data not found"}

并解析响应：

oReq.onload = function () {
  var data = JSON.parse(this.responseText);
  alert('Code ' + data.code);
  alert('Message ' + data.message);
};

在 PHP 页面上：添加您的代码和返回值：

例如：

Header('Content-Type: application/json');
echo json_encode(['code' => $errorCode, 'message' => $message]);

【讨论】：