Question

我想通过AJAX使用表单，所以我从stackoverflow上的另一篇文章中获取了此代码片段。它没有用，所以我添加了一个警报来检查脚本是否被执行。这似乎并非如此，我想知道为什么。

<head>
    <script src='jquery.js'></script>
    <script>
    var request;

    $("#foo").submit(function(event){

        alert("Hallu");

        if (request) {
            request.abort();
        }

        var $form = $(this);

        var $inputs = $form.find("input, textarea");

        var serializedData = $form.serialize();

        $inputs.prop("disabled", true);

        request = $.ajax({
            url: "/action.php",
            type: "post",
            data: serializedData
        });

        request.done(function (response, textStatus, jqXHR){
            // Log a message to the console
            console.log("Hooray, it worked!");
        });

        request.fail(function (jqXHR, textStatus, errorThrown){
            // Log the error to the console
            console.error(
                "The following error occurred: "+
                textStatus, errorThrown
            );
        });

        request.always(function () {
            // Reenable the inputs
            $inputs.prop("disabled", false);
        });

        event.preventDefault();
    });


   </script>
</head>
<body>
    <form id="foo">
        <input type="text" id="name" name="name" />
        <textarea id="msg" name="msg"></textarea>
        <input type="submit" value="Senden" />
    </form>
</body>

Answer 1

当脚本运行时，#foo不存在，因此没有任何东西可以绑定事件处理程序。

移动脚本使其显示在表单之后，或将其转换为函数并将其绑定为ready或load事件处理程序。

Answer 2

原因很简单。在加载之前，您对$('#foo')执行某些操作。在这个时候，JS对id =“foo”的对象一无所知，因为它还没有被加载。

将整个代码包裹在$(document).ready(function() { ... });。

中

这应该是这样的：

var request;

$(document).ready(function() {

    $("#foo").submit(function(event){

        alert("Hallu");

        if (request) {
            request.abort();
        }

        var $form = $(this);

        var $inputs = $form.find("input, textarea");

        var serializedData = $form.serialize();

        $inputs.prop("disabled", true);

        request = $.ajax({
            url: "/action.php",
            type: "post",
            data: serializedData
        });

        request.done(function (response, textStatus, jqXHR){
            // Log a message to the console
            console.log("Hooray, it worked!");
        });

        request.fail(function (jqXHR, textStatus, errorThrown){
            // Log the error to the console
            console.error(
                "The following error occurred: "+
                textStatus, errorThrown
            );
        });

        request.always(function () {
            // Reenable the inputs
            $inputs.prop("disabled", false);
        });

        event.preventDefault();
    });
});

请考虑使用一个好的IDE，比如NetBeans或Eclipse。它可以帮助您检测未关闭的括号和其他内容。

AJAX表单脚本未执行

2 个答案: