Javascript AJAX表单脚本不是'；不执行_Javascript_Php_Jquery_Html_Ajax

Javascript AJAX表单脚本不是'；不执行

javascript php jquery html ajax

Javascript AJAX表单脚本不是'；不执行,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我想通过AJAX使用表单，所以我从另一篇关于stackoverflow的文章中得到了这段代码片段。它不起作用，所以我添加了一个警报来检查脚本是否执行。事实似乎并非如此，我想知道为什么 <head> <script src='jquery.js'></script> <script> var request; $("#foo").submit(function(event){ alert("Hall

我想通过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>


var请求；
$（“#foo”）.submit（函数（事件）{
警报（“哈鲁”）；
如果（请求）{
request.abort（）；
}
var$form=$（此）；
var$inputs=$form.find（“输入，文本区域”）；
var serializedData=$form.serialize（）；
$inputs.prop（“禁用”，真）；
请求=$.ajax({
url:“/action.php”，
类型：“post”，
数据：序列化数据
});
完成（函数（响应、文本状态、jqXHR）{
//将消息记录到控制台
log（“万岁，成功了！”）；
});
失败（函数（jqXHR、textStatus、errorshown）{
//将错误记录到控制台
控制台错误(
“发生了以下错误：”+
文本状态，错误抛出
);
});
request.always（函数（）{
//重新启用输入
$inputs.prop（“禁用”，false）；
});
event.preventDefault（）；
});

当脚本运行时，

#foo

不存在，因此没有任何东西可以绑定事件处理程序

移动脚本，使其显示在表单之后，或者将其转换为函数，并将其绑定为

就绪

或

加载

事件处理程序。

原因很简单。您可以在加载之前对

$（'#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，比如NETBeaS或Eclipse。它可以帮助您检测未闭合的方括号和其他内容。
请检查控制台并找出您遇到的错误？jQuery的缺点之一是，当您尝试在空jQuery对象上绑定事件处理程序时，它不会引发错误。请将html放在脚本上方，并在脚本开头使用“防止默认”命令函数无需移动preventDefault调用。我这样做了，现在，控制台显示“意外输入结束”，我忘记关闭最后一个括号。请添加一个）
。我已经编辑了我的帖子。好的，谢谢。不过，还是出现了意想不到的错误。可能是脚本本身造成的。请粘贴它。也许我们可以帮助您。“未捕获的语法错误：输入意外结束”