php - 我的 AJAX PHP 请求有什么问题？

Question

我正在尝试将 3 个变量传递到我的脚本文件夹中的另一个脚本以查询数据库。

编辑:它刷新到这个页面

http://localhost:8080/procity/changepassword.php?username=asdf&password=a&confirm=a&code=bba7886bec2591db69c58dd315144114

JavaScript

function resetPassword() {
    var user = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var conf = document.getElementById('confirm').value;
    var code = document.getElementById('code').value;

    if (code.length == 0 || password.length == 0 ||
            user.length == 0 || conf.length == 0) {
        alert("Entries empty");
    } else if (password != conf) {
        alert("Passwords don't match");
    }  else {   
        $.ajax({
            type: "POST",
            url:  "scripts/changepassword.php", 
            data: {Username: user, Password: password, Code: code},
            dataType: "json",
            success: function(data) { alert("success"); }
        });
    }
}

HTML

<form>
<input id="username" placeholder="Username" name="username" type="text" /> 
<input id="password" placeholder="Password" name="password" type="password" />
<input id="confirm" placeholder="Confirm Password" name="confirm" type="password" />
<input id="code" placeholder="Code" name="code" type="text" /> 
<div class="registrationFormAlert" id="incorrectEntry"></div>
<p>&nbsp;</p>
<input class="btn" id="signinbut" onclick="resetPassword()" value="Reset"  type="submit" style="width:28%;" />
</form></div>

PHP

我的脚本/changepassword.php:

if (isset($_POST['Username']) && isset($_POST['Password'])&& isset($_POST['Code'])) {

}

问题是这只会刷新当前页面。它不处理请求。

Answer 1

当触发resetPassword() 函数时，您必须阻止默认的表单提交操作。由于您将 jQuery 与 $.ajax 结合使用，因此我将使用 jQuery 来执行此操作:

// add this code after your resetPassword function

$('form').submit(function (e) {
    e.preventDefault();

    resetPassword();
});

由于我绑定(bind)到表单的 submit 事件，您可以删除按钮上的 onclick 属性:

<input class="btn" id="signinbut" value="Reset" type="submit" style="width:28%;">

此外，您的 JavaScript 中似乎还缺少一些右括号。

就我个人而言，我会这样写:

JavaScript

$('form').submit(function (e) {
    'use strict';

    var user = $('#username').val();
    var password = $('#password').val();
    var conf = $('#confirm').val();
    var code = $('#code').val();

    e.preventDefault();

    if (code.length === 0 || password.length === 0 || user.length === 0 || conf.length === 0) {
        alert("Entries empty");
    } else if (password !== conf) {
        alert("Passwords don't match");
    } else {

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {

                alert("success");

            }

        });
    }
});

HTML

请注意，我已经从确认输入中删除了 name 属性，以防止它被序列化。此外，我还为输入添加了 required 属性。

<form action='scripts/changepassword.php' method='POST'>
    <input id="username" placeholder="Username" name="username" type="text" required />
    <input id="password" placeholder="Password" name="password" type="password" required />
    <input id="confirm" placeholder="Confirm Password" type="password" required />
    <input id="code" placeholder="Code" name="code" type="text" required />
    <div class="registrationFormAlert" id="incorrectEntry"></div>
    <p>&nbsp;</p>
    <button class="btn" id="signinbut" type="submit" style="width:28%;">Reset</button>
</form>

参见 jsFiddle .

PHP

由于 HTTP POST 参数是小写的(如序列化表单元素的 name 属性)，$_POST 数组键在您的 PHP 中应该是小写的。

<?php

if (isset($_POST['username']) && isset($_POST['password'])&& isset($_POST['code'])) {
    // ... do something
    header('Content-Type: application/json; charset=utf-8');
    echo $someJsonOutput;
}