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

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()功能时，您必须阻止默认表单提交操作。由于您正在使用$.ajax的jQuery，我将使用jQuery来执行此操作：

// add this code after your resetPassword function

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

    resetPassword();
});

由于我绑定了表单的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;
}

Answer 2

您需要阻止默认提交操作

在纯JavaScript中

form.addEventListener('submit',resetpassword,false)

function resetPassword(event){
    event.preventDefault();
    //your code here
}

这可以在按钮上工作，但也可以按下回车按钮。

在jquery中有点像这样..

$('form').submit(function(e){resetPassword(e);return false}) 

resetPassword(e){
e.preventDefault();
// your code
}

修改

单击提交按钮时的表格或按下输入按钮

将触发事件＆＃39;提交＆＃39;

所以如果从按钮
中删除函数调用者
并将其添加到表单

您可以按Enter或点击提交

在这两种情况下都会执行你的功能

你的职能

纯javascript中的第一个参数和jquery中的第一个参数是事件

您需要停止该默认事件

你可以用自己的功能
来做到这一点
event.preventDefault();

这样：

$('form').onsubmit(function(e){ e.preventDefault(); 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: "jso..................

和你的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> </p> <input class="btn" id="signinbut" value="Reset" type="submit" style="width:28%;" /> </form>

现在说看看纯javascript（可能与所有浏览器不兼容） http://caniuse.com/xhr2

document.getElementsByTagName('form')[0].addEventListener('submit',function(e){ e.preventDefault(); // validate form here else return or alert something var xhr = new XMLHttpRequest; xhr.open( 'POST' , YOURURL ); xhr.onload = function (){ alert('success') }; xhr.send( new FormData( this ) ) } , false );

Answer 3

更改您的代码：

<script>
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");

         }

        });
    }
}
</script>

<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();return false;" value="Reset"  type="submit" style="width:28%;" />
</form></div>

我只换了两个地方。第一个错误：在使用onclick事件时，使用return false来避免将表单提交到下一页（如果您使用的是ajax）。此外，您的代码格式不正确。我改变了它们。它现在应该工作

Answer 4

在使用Ajax之前，我们应该检查以下内容：

我们在使用<input type="submit" onclick="functioncall()">时要小心，因为点击此处提交表单按钮最终会将我们重定向到表单中指定的操作页面。
这就是你有这个链接的原因 http://localhost:8080/procity/changepassword.php?username=asdf&password=a&confirm=a&code=bba7886bec2591db69c58dd315144114
解决方案很简单：停止执行中的提交事件。使用 event.preventDefault（）或在这种情况下返回false。

我个人推荐使用此fiddle

中建议的方法来使用Ajax-PHP

小提琴是由另一个用户创建的，这个方法可以用于Ajax-PHP

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

的JavaScript

HTML

PHP

4 个答案:

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

的JavaScript

HTML

PHP