jquery click 函数响应奇怪。 ajax调用也没有触发

Question

以某种方式触发了GET，而不是POST 请求。

其次，没有调用 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>

console logs

Answer 1

因为你的按钮在form标签里面并且它没有type属性，所以它作为一个提交按钮并在调用ajax之前提交表单（默认表单方法是GET）

详情：

• 默认情况下，没有明确设置method 属性的表单是 使用GET方法提交
• 默认情况下，form 标记内的任何button 没有明确设置type 属性将被设置为type="submit"
• 因为您没有在html 中设置任何一个属性，所以当您单击该按钮时，它会在您的点击处理程序被触发调用 ajax 之前使用 GET 方法提交您的表单

要纠正这个问题，有 3 个选项：

1. 在按钮上明确声明type="button"（我会这样做）
2. 在您的点击处理程序顶部调用e.preventDefault 以取消提交实际表单的默认行为
3. 将按钮移到form 标签之外（你说你试过这个没有成功，但它确实有效see this jsFiddle 所以我想你没有把它移得足够远）

另外：

正如 Terry 在 cmets 中提到的，您还应该在表单上明确设置 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 };

然后你可以通过字符串化这个对象来传递给调用：

数据类型：'json'， 数据：JSON.stringify(obj)

希望对您有所帮助。