1

我正在尝试将 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'])) {

}

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

4

4 回答 4

4

触发该resetPassword()功能时，您必须阻止默认的表单提交操作。由于您将 jQuery 与 . 一起使用$.ajax，我将使用 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序列化表单元素的属性一样），所以$_POSTPHP 中的数组键应该是小写的。

<?php

if (isset($_POST['username']) && isset($_POST['password'])&& isset($_POST['code'])) {
    // ... do something
    header('Content-Type: application/json; charset=utf-8');
    echo $someJsonOutput;
}
于 2013-08-21T14:23:03.697 回答
0

您需要阻止默认提交操作

在纯 JavaScript 中是

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

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

这适用于按钮，但如果您按下回车按钮。

在 jquery 它的 somehting 像这样..

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

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

编辑

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

将触发事件“提交”

所以如果你从按钮中删除函数调用者

并将其添加到表单中

你可以按回车或点击提交

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

在你的函数里面

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

您需要停止该默认事件

你用 ntive 函数做到这一点

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>&nbsp;</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 );
于 2013-08-21T14:19:22.627 回答
0

像这样更改您的代码：

<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）。此外，您的代码之前格式不正确。我已经改变了它们。它现在应该可以工作

于 2013-08-21T14:31:51.710 回答
0

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

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

我个人通过this fiddle建议的方法推荐Ajax-PHP

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

于 2013-08-21T14:59:53.453 回答