Question

嘿大家，我在使用ajax提交的（我认为简单的）表单时遇到了一些问题。

用户第一次提交表单时，一切正常：div的内容发生变化，处理完php。但是如果我的数据库中没有匹配，它将返回“f”，并且javascript将回写一个无法使用ajax重新提交的无法使用的表单。

HTML：

<div class="maincontainer" id="login">

  <form id="loginform" onsubmit="void login();return false;">

    <input name="username" type="text" class="textboxinput"  id="username"  autocomplete="off" />
    <input name="password" type="password" class="textboxinput" id="password"  autocomplete="off" />
    <input type="submit" name="button" class="button" id="button" value="Login" /> 
  </form>
</div>

Javascript：

function login(){

    //Change the box content to "Logging in"
    $("#login").html("<p style='line-height:170px;text-align:center;width:100%;margin:0px;padding:0px;'>Logging in</p>");

    //Get the values of the username and password field
var username = $('#username').val();
var password = $('#password').val();

    //Make the ajax request
$.ajax({        
        datatype: "text",
        type: "POST",
        url: "process.php",
        data: "username=" + username + "&password=" + password,
        success: function (m) {

        //If there's no match, rewrite the form in the div  
            if ( m == "f"){
                content= "  <form id='loginform' onsubmit='void login();return false;'><input name='username' type='text' class='textboxinput' id='username' autocomplete='off' /><input name='password' type='password' class='textboxinput' id='password' autocomplete='off' /><input type='submit' name='button' class='button' id='button' value='Login' /> <p style='font-size:small;'>Login failed, please try again</p></form>";         
                $("#login").html(content);
            }
        }

    });



};

修改

我没有发现问题，但我确实找到了一个解决方案，不是要删除我的表单，只是隐藏它

HTML：

<div class="maincontainer" id="login">
    <div id="errorbox"></div>
     <form id="loginform" onsubmit="return login();">

    <input name="username" type="text" class="textboxinput username"  id="username" value="username"  onfocus="if(this.value==this.defaultValue) this.value='';"   onblur="if(this.value=='') this.value='username'" autocomplete="off" />
    <input name="password" type="password" class="textboxinput password" id="password" value="password"  onfocus="if(this.value==this.defaultValue) this.value='';"  onblur="if(this.value=='') this.value='password'" autocomplete="off" />
    <input type="submit" name="button" class="button" id="button" value="Login" /> 
    <div id="errorshow"><a href="register.php">Register</a><a href="credsretrieve.php">Forgot your login infos?</a></div>
  </form>
</div>

使用Javascript：

function login(){

    var username = $('#username').val();
    var password = $('#password').val();

//Do security checks here


    $("#loginform").hide();

    $("#errorbox").html("<p class='logloading'>Logging in</p>");

    $.ajax({        
        datatype: "text",
        type: "POST",
        url: "login.php",
        data: "username=" + username + "&password=" + password + "&method=js",
        success: function (m) {

            if ( m == "f"){ 
                $("#errorbox").html("");
                $('#username').val("");
                $('#password').val("");
                $("#loginform").show();
                $("#errorshow").html("<p class='errormsg'>Wrong username/password combination</p>");
                $("#username").focus();

            }

            else{
                window.location = m;                
            }
        }

    });
    return false;
};

哦，我应该感谢在这里发表评论（并发布）的每个人都对我有所帮助。

Answer 1

只是修复，而不是对原始问题的明确答案。

我用

data: $('#form_id').serialize()

而不是手动完成所有这些：

data: "username=" + username + "&password=" + password,

当用户提交空格时会发生什么？您的查询中断。

只需确保用户名框的名称为username，密码框的格式相同。

修改

这段代码有点奇怪：

onsubmit='void login();return false;'

尝试此代码（只需删除该部分并插入），而不是手动输入：

$('#loginform').live('submit', function(e) { login(); e.preventDefault() });

Answer 2

我想我也曾经遇到过这个问题。

一个看似合理的解决方法是将登录功能放在提交按钮的onclick上（并且还返回false）

无法使用ajax两次提交我的表单

修改

2 个答案: