jQuery的點擊功能奇怪的響應。 Ajax調用也未觸發

Question

代替POST請求，以某種方式觸發了GET 。

其次，沒有調用ajax調用。

我已經做過一百次了，但是我嘗試的一切似乎無濟於事。 這可能是我的錯，但請幫忙。 如果您還需要更多，請詢問。 問候

$(document).ready(function(){
    console.log("bro");
    $("#login").click(function () {
        console.log("hi");
        var name = $('#uname').val();
        var password = $('#password').val();
        console.log(name);
        console.log(password);
        $.ajax({
            url:"login-check.php",
            data: {name:name, password:password},
            dataType:"text",
            method:"POST",
            success:function(data){
                if(data === "1" || data === "2"){
                    alert(data);
                    console.log("hello");
                    window.open('index.php','_self');
                }
                else{

                }
            }
        });
    });
});

HTML：

<!-- Form Code -->
<div class = "container">
    <h2 style="text-align:center;">Please Fill the form to Sign up</h2>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-2" for="name">Username:</label>
            <div class="col-sm-10">
                <input type = "username" class = "form-control" name = "uname" id = "uname" placeholder = "username" required autofocus>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Password:</label>
            <div class="col-sm-10">          
                <input type = "password" class = "form-control" name = "password" id = "password" placeholder = "password" required>
            </div>
        </div>
        <div class="form-group">        
            <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-primary" name = "login" id="login">Sign In</button>
            </div>
        </div>
     </form>

     Click here to clean <a href = "logout.php" tite = "Logout">Session.

</div>

控制台日志

Answer 1

因為您的按鈕在form標記內並且沒有type屬性，所以它充當提交按鈕並在調用ajax之前提交表單（順便說一下，表單方法是GET）

細節：

• 默認情況下，未顯式設置method屬性的表單是使用GET方法提交的
• 默認情況下，任何未明確設置type屬性的form標簽內的button都將設置為type="submit"
• 因為您沒有在html設置任何屬性，所以當您單擊按鈕時，它會在觸發單擊處理程序調用ajax之前使用GET方法提交表單。

要解決此問題，有3個選項：

1. 在按鈕上顯式聲明type="button" （這就是我要做的）
2. 在點擊處理程序頂部調用e.preventDefault取消提交實際表單的默認行為
3. 將按鈕移到form標簽之外（您說您嘗試過沒有成功，但是看到j​​sFiddle確實起作用了，所以我想您沒有將其移得足夠遠）

另外：

正如Terry在評論中提到的那樣，您還應該在表單上顯式設置action和method屬性，例如：

<form action="login-check.php" method="post" class="form-horizontal">

即使用戶禁用了javascript，這也可以確保登錄有效，並且通常是一種好的做法。

Answer 2

問題在這里：

method:"POST",

它應該是：

type: "POST",

數據類型的定義是：

contentType: "text/plain",

編輯：ajax調用的完整代碼

var dataString = 'name=' + name + '&password=' + password;
    $.ajax({
        type: "POST",
        url:"login-check.php",
        data: dataString,
        success: function(data){
            if(data === "1" || data === "2"){
                alert(data);
                console.log("hello");
                window.open('index.php','_self');
            }
            else{

            }
        }
    });

Answer 3

我認為問題出在ajax調用的定義中。 我建議像這樣傳遞一個json對象：

var obj = {用戶名：un，密碼：pwd};

然后，您可以通過對該對象進行字符串化來將其傳遞給調用：

dataType：'json'，數據：JSON.stringify（obj）

希望能有所幫助。