HTML 字段不会通过 AJAX POST 到 PHP

问题描述 投票：0回答：2

我开始为我的应用程序使用 PHP 登录脚本的基本启动，该脚本从 here 克隆。当尝试在注册页面上添加元素时，signup.php 数据在 AJAX 处理后不会传递到 PHP。我对 PHP 非常熟悉，AJAX 则不同——我是新手。

我添加了一个 POST 解析器来输出到主注册页面，查看 PHP 接收到的内容。除了我添加的输入之外，所有其他输入都已收到。正如错误所证明的： 

Notice: Undefined index: name in C:\xampp\htdocs\loader\login\createuser.php on line 11


正如您在这里所看到的，POST 结果显示在弹出窗口下方，我想查看哪些内容被 POST 到 createuser.php。显然，我添加的 name 元素没有被路由到正确的 PHP 文件。当然，PHP 显示的错误说明由于未 POST 名称而无法找到该名称。

signup.php，添加的行是

<input name="name" id="name" type="text" class="form-control" placeholder="John Smith" autofocus>
。在文件末尾，我添加了一个验证，以确保在将表单发布到 signup.js 之前填写完毕。 我不认为问题出在这个 php 文件上。 

  if (isset($_SESSION['username'])) {
      session_start();
      session_destroy();
  }


?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Signup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="../css/main.css" rel="stylesheet" media="screen">
  </head>

  <body>
    <div class="container">

      <form class="form-signup" id="usersignup" name="usersignup" method="post" action="createuser.php">
        <h2 class="form-signup-heading">Register</h2>
        <input name="newuser" id="newuser" type="text" class="form-control" placeholder="Username" autofocus>
    <input name="name" id="name" type="text" class="form-control" placeholder="John Smith" autofocus>
        <input name="email" id="email" type="text" class="form-control" placeholder="Email">
<br>
        <input name="password1" id="password1" type="password" class="form-control" placeholder="Password">
        <input name="password2" id="password2" type="password" class="form-control" placeholder="Repeat Password">

        <button name="Submit" id="submit" class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>

        <div id="message"></div>
      </form>

    </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <script src="js/signup.js"></script>


    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>

$( "#usersignup" ).validate({
  rules: {
    name: {
        required: true
    },
    email: {
        email: true,
        required: true
    },
    password1: {
      required: true,
      minlength: 4
    },
    password2: {
      equalTo: "#password1"
    }
  }
});
</script>

  </body>
</html>

signup.js，这就是我认为问题所在的地方。很可能是因为我不理解AJAX。我在这里唯一更改的是 IF 语句中的子句和数据对象末尾的子句，

&name="+name
。即使将其添加到 post 到 createuser.php 后，PHP 也没有收到该变量。

    $(document).ready(function(){

  $("#submit").click(function(){

    var username = $("#newuser").val();
    var name = $("#name").val();
    var password = $("#password1").val();
    var password2 = $("#password2").val();
    var email = $("#email").val();

    if((username == "") || (name == "") || (password == "") || (email == "")) {
      $("#message").html("<div class=\"alert alert-danger alert-dismissable\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>Please ensure that name, username and password are all filled.</div>");
    }
    else {
      $.ajax({
        type: "POST",
        url: "createuser.php",
        data: "newuser="+username+&password1="+password+"&password2="+password2+"&email="+email+"&name="+name,
        success: function(html){

            var text = $(html).text();
            //Pulls hidden div that includes "true" in the success response
            var response = text.substr(text.length - 4);

          if(response == "true"){

            $("#message").html(html);

                    $('#submit').hide();
            }
        else {
            $("#message").html(html);
            $('#submit').show();
            }
        },
        beforeSend: function()
        {
          $("#message").html("<p class='text-center'><img src='images/ajax-loader.gif'></p>")
        }
      });
    }
    return false;
  });
});

createuser.js 我不相信问题出在这个 PHP 文件中，但我以前就错了。我添加了 

$name = $_POST['name'];
并且添加了：

  foreach ($_POST as $key => $value){
  echo "{$key} = {$value}\r\n";



<?php
require 'includes/functions.php';
include_once 'config.php';

//Pull username, generate new ID and hash password
$newid = uniqid(rand(), false);
$newuser = $_POST['newuser'];
$newpw = password_hash($_POST['password1'], PASSWORD_DEFAULT);
$pw1 = $_POST['password1'];
$pw2 = $_POST['password2'];
$name = $_POST['name'];
    //Enables moderator verification (overrides user self-verification emails)
if (isset($admin_email)) {

    $newemail = $admin_email;

} else {

    $newemail = $_POST['email'];

}
//Validation rules
if ($pw1 != $pw2) {

    echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Password fields must match</div><div id="returnVal" style="display:none;">false</div>';

} elseif (strlen($pw1) < 4) {

    echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Password must be at least 4 characters</div><div id="returnVal" style="display:none;">false</div>';

} elseif (!filter_var($newemail, FILTER_VALIDATE_EMAIL) == true) {

    echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Must provide a valid email address</div><div id="returnVal" style="display:none;">false</div>';

} else {
    //Validation passed
    if (isset($_POST['newuser']) && !empty(str_replace(' ', '', $_POST['newuser'])) && isset($_POST['password1']) && !empty(str_replace(' ', '', $_POST['password1']))) {

        //Tries inserting into database and add response to variable

        $a = new NewUserForm;

        $response = $a->createUser($newuser, $newid, $newemail, $newpw);

        //Success
        if ($response == 'true') {

            echo '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>'. $signupthanks .'</div><div id="returnVal" style="display:none;">true</div>';

            //Send verification email
            $m = new MailSender;
            $m->sendMail($newemail, $newuser, $newid, 'Verify');

        } else {
            //Failure
            mySqlErrors($response);

        }
    } else {
        //Validation error from empty form variables
        echo 'An error occurred on the form... try again';
    }

    foreach ($_POST as $key => $value){
  echo "{$key} = {$value}\r\n";
}
};

为了说得更清楚，我的问题仍然是为什么我添加的字段没有进入最终的 PHP 文件。

还要澄清的是，这段代码可以完美运行，无需尝试添加额外的字段。经过验证，这段代码是有效的。一旦我尝试添加我的姓名字段，代码就会中断。

感谢您提供的任何帮助。

javascript php mysql ajax
2个回答
1
投票

我根据您提供的内容大致编写了一个虚拟测试脚本。

提供代码时的提示 - 请指定每个部分的实际文件名。

这是“signup.js”文件的一部分，其中注释掉了数据定义并添加了新定义。

更好的方法是构建数据，如下所示。 

$.ajax({
    type: "POST",
    url: "createuser.php",
    // data: "newuser=" + username + & password1 = "+password+" & password2 = "+password2+" & email = "+email+" & name = "+name,
    data: {
        'newuser': username,
        'password1': password,
        'password2': password2,
        'email': email,
        'name': name
    },

使用我运行的代码 - 我将其发送到 var_dump($_POST)，它将 POST 数据显示回提交按钮下的表单上。所以那一点应该有效。

试一试。

下面是我在表单中输入数据后得到的结果（结果是我输入用于测试的值，我已经删除了您的验证以使其不受影响）

array (size=5)
  'newuser' => string 'my username' (length=11)
  'password1' => string 'my password' (length=11)
  'password2' => string 'my password' (length=11)
  'email' => string 'my email' (length=8)
  'name' => string 'my name' (length=7)
1
投票

占位符不是“默认值”。您不能期望它们作为内容发送。这就是您在 PHP 中收到警告的原因。

另一个问题是你的字符串连接：缺少引号。

它应该是 

"newuser="+username+"&password1="+password
而不是你目前拥有的：
"newuser="+username+&password1="+password

请注意
&password1
之前的引用。

您可能应该得到一个更好的编辑器，因为您应该基于语法突出显示来捕捉到这一点。

也就是说，这有很多问题。

首先，您应该依赖 MySQL 的 

uniqid(rand(), false)
功能，而不是使用 
AUTO_INCREMENT
来生成 ID。

那就是你，JS。你为什么要使用 jQuery 来实现这个？！ JS 现在有 Fetch API，它优于 jQuery 的方法。还有 FormData 抽象，可以简化表单处理。

document.querySelector('usersignup').addEventListener('submit', function (event){
    fetch('createuser.php', {
        method: 'POST',
        body: new FormData(event.target)
    }).then(function (response) {
        return resonse.text())
    }).then(function(html) {
        document.querySelector('#message').innerHTML = html;
    })
}, false);

不过，您必须添加 polyfill 才能与旧版 IE 版本兼容。

另外...发送重复密码到底有什么意义？你可以在JS端比较一下，只发一个。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.