Question

我已经创建了我的Ajax调用，因为它可以在下面看到，但不知何故它没有触发。当我请求通过POST方法发送数据时，它仍显示在 URL：xxxxxx / index.php？username = martin＆amp; password = 1234“。控制台上也没有显示错误。

这是我的代码

<!DOCTYPE html>
<head> 
    <meta charset = "utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <title> RBH-PAS system </title>
    <link rel = "stylesheet" type ="text/css" href = "pascss/index.css " >
    <script>
$(document).ready(function(){

    //event.preventDefault();

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

        var x = $('#username').value();
        var y = $('#password').value();

        console.log(x);

            if(x==null || x ==""){
                alert("Username must be filled out");
                return false;
            }
                else if(y==null || y ==""){
                alert("Password must be filled out");
                return false;
                }


        else{

        $.ajax({
                    url: "login.php",
                    type: "POST",
                    data: {username:x, password:y},
                    cache: false,
                        success: function(result){
                        //if(result == 0 || result == null ){
                        //alert("result");
                        //}
                        }
                });
        }
        return false;

    });
});

    </script>

</head>

<body>

    <h1><CENTER> WELCOME TO PAS DASHBOARD</CENTER></h1>

    <div id="login">

        <h2><span class="fontawesome-lock"></span>Sign In</h2>


        <form id ="login1">
            <fieldset>

                <p><label for="username">Username</p>
                <p><input type="text" id ="username" name="username" placeholder="Enter username" required></p>

                <p><label for="password">Password</label></p>
                <p><input type="password" id="password" name="password" placeholder="Enter password" required></p>

                <p><input type="submit" id =" submit" value="Sign In" ></p>

            </fieldset> 

</body>

Answer 1

使用按钮而不是提交按钮进行点击活动，因此请将提交按钮更改为：

<input type="button" id ="loginbutton" value="Sign In" />

并更改该行

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

到

$("#loginbutton").click(function(){

Answer 2

如果它正在处理url：xxxxxx / index.php？username = martin＆amp; password = 1234，请尝试使用AJAX中的GET方法。或者使用$ _POST

接收login.php页面中的变量

Answer 3

修复代码。

首先，您要使用普通表格：

<form id="form-id">

    <input type="text" name="username" />
    <input type="text" name="password" />
    <input type="submit" value="submit" />

</form>

和一些新的JavaScript。首先我们将绑定到表单上的提交事件，然后阻止默认操作。然后，我们将使用serialize（）来序列化输入。接下来，我们使用$.each()迭代这些输入，以确保它们填充了数据。最后，我们使用$.post()提交了帖子请求。然后我们返回false。

$(function(){

//The better way(IMO)


    //bind to the form submit function.
    $('#form-id').submit(function(event){
        event.PreventDefault();//prevent the default submit mechanism
        var error = false;
        var QueryString = $(this).serialize(); //serialize the form inputs into a k:v format for a http request.

        //make sure our fields are populated with data
        $.each(QueryString,function(key, value){
            if(value == ""){
                alert(key+" can't be empty");
                error = true;
            }
        });

        if(error === false){
            $.post('login.php',QueryString, function(data){
                //do something with result
            }).success(function(){
                //success callback fires immediately, but doesn't have access to the ajax callback data.
            }).error(function(){
                //do something on error.
            })
        }
        return false;
    })
})

Answer 4

试试这个

<script>
            $(document).ready(function(){

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

                    var x = $('#username').val();
                    var y = $('#password').val();

                    console.log(x);

                        if(x==null || x ==""){
                            alert("Username must be filled out");
                            return false;
                        }
                            else if(y==null || y ==""){
                            alert("Password must be filled out");
                            return false;
                            }


                    else{

                    $.ajax({
                                url: "login.php",
                                type: "POST",
                                data: {username:x, password:y},
                                cache: false,
                                    success: function(result){
                                    //if(result == 0 || result == null ){
                                    //alert("result");
                                    //}
                                    }
                            });
                    }
                    return false;

                });
            });

        </script>


<form id ="login1">
            <fieldset>

                <p><label for="username">Username</p>
                <p><input type="text" id ="username" name="username" placeholder="Enter username" required></p>

                <p><label for="password">Password</label></p>
                <p><input type="password" id="password" name="password" placeholder="Enter password" required></p>

                <p><input type="submit" id ="submit" value="Sign In" ></p>

            </fieldset> 
     </form>

JQUERY Ajax调用没有触发

4 个答案: