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

我使用以下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>

---

请按如下方式更改您的html容器

<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="button" value="Login" id="submitButton" onclick="handleLogin()">

---

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

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

   ... See detailed jsFiddle example ...

   return false;
});

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

还可以使用像action这样的表单属性来提供用于设置ajax请求类型的ajax URL或方法

注：这种类型的绑定对jQuery1.6不起作用

---

尝试以下操作：ifresponse.responseText

将您的表单方法更改为POSIT。它已经在使用post了？我看不出在您的URL中显示用户名和密码的原因。除此之外，您需要更正两件事：1 mysql_查询返回一个资源，并且您正在检查对象2，即使没有找到匹配项，您仍然返回一个成功索引。忘了提一下，这是mysql\u num\u rows，那里的$result->num\u rows是什么？你能发布loginForm吗？您描述的行为听起来好像数据不是通过邮件发送的。我知道您已经在AJAX中设置了表单提交，但是我们先看看所有的代码，然后再打折。表单提交实际上是什么时候触发的？似乎js函数不是由单击或任何操作触发的，因此表单将默认为标准帖子。因此，这使我收到了一个警报，提示您登录失败，但是用户名和密码绝对正确…这是另一个问题..请使用firebug或其他工具跟踪ajax请求，并检查用户表..您在那里提供的用户名和密码？如果response.success{请将此行更改为if response.success==true{我已经更新了帖子。请检查并让我知道。这与我的php文件中的内容有关吗

function handleLogin() {
    var e = $("#username").val();
    var p = $("#password").val();

    if(e != "" && p != "") {
        $.ajax({ 
                 type: 'POST', 
                 url: 'index.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");
                     } 
                    else {
                        alert("Your login failed");
                    }
                 },
                 error: function(error){
                    alert('Could not connect to the database' + error);
                 }
               }); 
    }
    else {
        alert("You must enter username and password");
    }
    return false;
}

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

   ... See detailed jsFiddle example ...

   return false;
});