javascript - 提交表单时刷新 PHP/JavaScript 登录脚本

Question

我使用以下 JavaScript 创建了一个登录页面:

    function handleLogin() {
    var form = $("#loginForm");    
    //disable the button so we can't resubmit while we wait
    //$("#submitButton",form).attr("disabled","disabled");
    var e = $("#username", form).val();
    var p = $("#password", form).val();

    console.log("click");
    if(e != "" && p != "") {
        //var str = form.serialize();
        //alert(str);
        $.ajax({ 
                 type: 'POST', 
                 url: 'http://localhost/php/log.php', 
                 crossDomain: true,
                 data:  {username: e, password :p},
                 dataType: 'json', 
                 async: false,

                 success: function (response){ 
                    alert ("response"); 
                    if (response.success) { 
                        alert("you're logged in");
                        window.localStorage["username"] = e;
                        window.localStorage["password"] = md5(p); 
                        //window.localStorage["UID"] = data.uid;           
                        window.location.replace("http://www.google.co.uk");
                    } 
                    else {

                        alert("Your login failed");
                        //window.location("main.html");
                    }


                 },
                 error: function(error){
                     //alert(response.success);
                    alert('Could not connect to the database' + error);
                    window.location = "index.html";
                }
        }); 
    }
    else {
        //if the username and password is empty
        alert("You must enter username and password");

    }
    return false;
    }

log.php 中的 PHP 是:

        $link = mysql_connect("$host", "$username", "$password") or die("Could not connect to host.");
        mysql_select_db("$db_name", $link) or die("Could not find database.");


       $uname = isset($_POST['username']) ? $_POST['username'] : '';
       $password = isset($_POST['password']) ? $_POST['password'] : '';



        $sql = "SELECT * FROM user WHERE username = '$uname' AND password = '$password'";
        $result=mysql_query($sql);
        $num_row=mysql_num_rows($result);
        $row=mysql_fetch_array($result);


        if (is_object($result) && $result->num_rows == 1) {
        $response['success'] = true;

        }
        else
        {
        $response['success'] = false;
        }

        echo json_encode($response);

         //echo 'OK';

如果组合错误，我希望页面显示一些错误，或者如果组合正确，则重定向到不同的页面。但是它只是使用 url 中的用户名/密码进行刷新。

登录表单

<form id="loginForm" method="post">
      <div data-role="fieldcontain" class="ui-hide-label">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" placeholder="Username" />
  </div>
      <div data-role="fieldcontain" class="ui-hide-label">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" placeholder="Password" />
  </div>
      <input type="submit" value="Login" id="submitButton">
    </form>

Answer 1

由于您使用的是 jQuery(版本 1.10.1)，因此您可以将 click 事件直接绑定(bind)到表单提交按钮

$(document).on('click', '#submitButton', function(e) {
   e.preventDefault();

   ... See detailed jsFiddle example ...

   return false;
});

使用 preventDefault()，您可以删除“提交”按钮的默认提交行为，这样页面在表单提交后就不会重新加载。

还可以使用action等表单属性来提供ajax URL或方法，以设置ajax请求类型。

P.S 这种类型的绑定(bind)不适用于 jQuery 1.6

jsFiddle example