爲什麼這個jquery代碼無法正確執行？

我想了解如何在PHP和MySQL中使用JQuery。我在網上發現了這個代碼，但它不適合我。該代碼應該是一個簡單的登錄屏幕，它使用JQuery向用戶輸出消息而不重定向頁面。我已經檢查過每一個人（數據庫，文件，文件名等），一切工作正常。如果我刪除：爲什麼這個jquery代碼無法正確執行？

"$("#myForm").submit(function() { 
     return false; 
});"

從腳本，登錄工作，但它重定向到實際的PHP頁面這是我不想要的東西。我希望PHP文件的輸出語句在不重定向的情況下在HTML頁面上彈出。如果我保留那部分代碼，當點擊提交按鈕時（填充字段時）什麼都不會發生。如果我沒有輸入任何內容，我會收到消息「請輸入用戶名和密碼」。如代碼所示，所以我知道JQuery正在工作。但是輸入任何時間信息，提交時都不會發生任何事情。我認爲這個問題與以下幾點有關：

function(data) { 
    $("div#ack").html(data); 
});

$ .post函數的參數。我在整個腳本中放置了警報，並且未執行放置在該函數中的警報。誰能告訴我發生了什麼事？

HTML代碼：

<html> 
<head><title>Login Form: JQuery + PHP + AJAX</title></head> 
<body> 

    <form id="myForm" action="http://localhost/login.php" method="POST"> 
     username: <input type="text" name="username" id="username"/><br /> 
     password: <input type="password" name="password" id="password"/><br /> 
     <button id="submit">Login</button> 
    </form> 

    <div id="ack"></div> 

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src=my_script.js"></script> 
</body> 
</html>

JQuery的代碼（my_script.js）：

$("button#submit").click(function() { 

    if($("#username").val() == "" || $("#password").val() == "") 
     $("div#ack").html("Please enter both username and password."); 
    else 
     $.post($("#myForm").attr("action"), 
     $("myForm :input").serializeArray(), 
     function(data) { 
      $("div#ack").html(data); 
     }); 

    $("#myForm").submit(function() { 
     return false; 
    }); 
});

PHP代碼（login.php中）：

<?php 

    mysql_connect('localhost','root','pass'); 
    mysql_select_db('people'); 

    $username = mysql_real_escape_string($_POST["username"]); 
    $password = mysql_real_escape_string($_POST["password"]); 

    if(empty($username) || empty($password)) 
     echo "Username and Password Mandatory - from PHP"; 
    else { 
     $sql = "SELECT count(*) FROM users WHERE(username='$username' AND password='$password')"; 
     $res = mysql_query($sql); 
     $row = mysql_fetch_array($res); 

     if($row[0] > 0) 
      echo "Login Successful"; 
     else 
      echo "Login Failed"; 
    } 

?>

來源

2013-03-20 ohetlol393

按下登錄按鈕將觸發javascript和login.php。

$("#myForm").submit(function() { 
    return false; 
});

沒有必要的形式行動的權利，因爲你並不需要的PHP直接調用：在你的情況，因爲你阻止這種代碼的形式處理將只觸發JavaScript代碼。您將通過AJAX調用它並返回javascript內的值。您可以在這裏查看$ .post文檔：http://api.jquery.com/jQuery.post/。所以你的提交按鈕的onclick事件函數是完全錯誤的。

重寫代碼的方法是：

1）修改onclick事件。

$("button#submit").click(function() { 

    if($("#username").val() == "" || $("#password").val() == "") 
     $("div#ack").html("Please enter both username and password."); 
    else 
     $.post("http://localhost/login.php", 
     $("myForm :input").serializeArray(), 
     function(data) { 
      $("div#ack").html(data); 
     }); 
});

2）拆下表單操作是這樣的：

<form id="myForm"> 
    username: <input type="text" name="username" id="username"/><br /> 
    password: <input type="password" name="password" id="password"/><br /> 
    <button id="submit">Login</button> 
</form>

來源

2013-03-20 02:58:23 bandrei2408

對不起，延遲迴復。我現在就試試吧！ – bandrei2408 2013-03-20 10:16:06

嘗試做一個print_r($_POST)您$_POST變量。你會看到有一個空的數組。你的問題還是在你的腳本：

$.post("http://localhost/login.php", 
    $("myForm :input").serializeArray(), 
    function(data) { 
     $("div#ack").html(data); 
});

正如你可以看到試圖訪問DOM與myform表單中輸入類型的對象，當你忘了#。所以要修復它，請修改腳本$("myForm :input")到$("#myForm :input")。您不必做任何我之前建議的更改。我認爲這是一個不重視的問題。

編輯：

哦，對了，你將永遠不會得到這個輸出到您的HTML：因爲您只需發送AJAX請求時，表單字段不爲空

if(empty($username) || empty($password)) 
    echo "Username and Password Mandatory - from PHP";

出現這種情況。我建議僅在PHP中驗證表單，因爲不需要在JavaScript內部和PHP內部驗證它們。這裏是你的代碼應該是這樣的：

$("button#submit").click(function() { 
    $.post($("#myForm").attr("action"), 
    $("#myForm :input").serializeArray(), 
    function(data) { 
     $("div#ack").html(data); 
    }); 

    $("#myForm").submit(function() { 
     return false; 
    }); 
});

來源

2013-03-20 10:53:46 bandrei2408

你可以請嘗試包括這些腳本，而不是標題中的jquery（請將它們包括在標題中）： http://code.jquery.com/jquery-1.9.1.min.js http： //code.jquery.com/jquery-migrate-1.1.1.min.js 另外，請查看Google Chrome中的控制檯日誌，以查看javascript是否報告了任何錯誤。如果您看到錯誤，請在這裏發佈。 – bandrei2408 2013-03-20 13:42:11

嘗試使用login.php代替http：//localhost/login.php。 – bandrei2408 2013-03-20 19:34:27

嘗試使用XAMPP啓動並運行該代碼。它肯定會起作用。 – bandrei2408 2013-03-20 20:15:17

我發現這個代碼片段前一段時間的問題，並忘記了這篇文章。所以我想我會發布修復。就像我最初以爲

因此很明顯，

$("myForm :input").serializeArray()

不是從形式搶奪用戶的輸入。

我通過抓住表單值固定，

var uname = $("#username").val(); 
var passwd = $("#password").val();

然後將它們作爲在jQuery的.post方法PHP腳本參數。我也把網址，而不是

$.post($("#myForm").attr("action")

所以最終的結果看起來是這樣的，

$.post("someURL/myfile.php", {username: uname, password: passwd}, function(data) { 
    $("div#ack").html(data); 
});

之後一切運行良好。

來源

2013-06-13 03:17:50 ohetlol393

爲什麼這個jquery代碼無法正確執行？

回答

相關問題