Javascript 提交表单时未发生ajax请求_Javascript_Php_Jquery_Ajax

Javascript 提交表单时未发生ajax请求

javascript php jquery ajax

Javascript 提交表单时未发生ajax请求,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我试图使用Ajax作为表单，但它似乎不起作用。我不确定这是否是因为该文件是php文件，但显示为javascript文件，或者类似的内容，但我希望得到修复。提前谢谢 login/index.php <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge

我试图使用Ajax作为表单，但它似乎不起作用。我不确定这是否是因为该文件是php文件，但显示为javascript文件，或者类似的内容，但我希望得到修复。提前谢谢

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title><?php echo SERVER_NAME; ?> | <?php echo $this->title ?></title>

        <link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="<?php echo URL; ?>/public/css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="<?php echo URL; ?>/public/css/css.login.php" />

        <script type="text/javascript" src="<?php echo URL; ?>/public/js/jquery.min.js"></script>
        <script type="text/javascript" src="<?php echo URL; ?>/public/js/bootstrap.min.js"></script>
    </head>

    <body>

        <div id="login" class="container">
            <div class="module">
                <div class="module-header">
                    <h4>Login</h4>
                </div>
                <div class="module-body module-padding">
                    <form class="form" method="post" action="<?php echo URL;?>/actions/login.php">
                        <input type="text" name="login-username" placeholder="Username">
                        <br />
                        <input type="password" name="login-password" placeholder="Password">
                        <br />
                        <input type="submit" name="submit" placeholder="Login" class="pull-right">
                    </form>
                </div>
            </div>
            <div class="msg">

            </div>
        </div>

        <script type="text/javascript" src="<?php echo URL; ?>/public/js/user-login.php"></script>

    </body>
</html>


| 
你最好把你表格的action
属性作为url
当你说它不起作用时，它至少能得到失业救济金吗？也许你应该解释到底什么不起作用，以及你做了什么来修复它。啊，对不起@adeneo。我的头脑是困惑的，我甚至没有意识到我没有解释它。当我提交表单时，它只会进入页面actions/login.php，它是白色的，并显示输出的json文本，而不是将其返回到ajax中，以显示在提交的同一页面上。我看不出您在哪里阻止默认表单操作。我在{（'.form'）.submit（函数（事件）{
中看到事件
，但我没有看到事件.PreventDefault（）；
。因此，现在您的表单是按照传统方式发布的，而不是通过上面提到的AjaxAs，没有任何东西可以阻止表单提交，因此您看到的行为是发布的代码所期望的。您必须添加.preventDefault（）
<?php

    header('Content-Type: application/javascript');

    require "../../Application/Configuration/config.php";

?>

$(window).load(function() {
    $('.form').submit(function(event) {
        var formData = {
            'login-username': $('input[name=login-username]').val(),
            'login-password': $('input[name=login-password]').val()
        };

        $.ajax({
            type: "POST",
            url: "<?php echo URL; ?>/actions/login.php",
            data: formData,
            success: function (json_data) {
                var data_array = $.parseJSON(json_data);
                if (data_array['error'] == false) {
                    $('.msg').css('display', 'block');
                    $('.msg').addClass('msg-success');
                    $('.msg p').html(data_array['text']);
                    $('.msg').fadeOut(4000);
                    var delay = 4000;
                    setTimeout(function() {
                        window.location.replace("../index.php");
                    }, delay);
                } else {
                    $('.msg').css('display', 'block');
                    $('.msg').addClass('msg-failure');
                    $('.msg p').html(data_array['text']);
                    $('.msg').fadeOut(4000);
                }
            },
            fail: function () {
                alert("failed to send");
            }
        });
    });
});