Question

我尝试了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代码完全可怕且无效，即使我似乎无法找到原因。

Answer 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
  }
 });
});

Answer 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]);

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

2 个答案: