jQuery 不会正确完成提交，并且在提交时会做一些意想不到的事情答案

【问题标题】：jQuery won't finish submitting properly and does unexpected things upon submittingjQuery 不会正确完成提交，并且在提交时会做一些意想不到的事情
【发布时间】：2015-03-16 04:43:59
【问题描述】：

我正在创建一个使用“Reddit API”为您推荐子版块的网站。

项目是here。目前最好在最大化的浏览器窗口中查看该站点，因为我还没有完成前端。

它的工作原理是从表单中获取输入的子版块并将它们放入一个数组中（使用.serializeArray()）。我也使用相同的函数从第二种形式中获取省略的 subreddits。然后它获取值并将它们放在一个字符串中。最终结果（在 api 变量中）应该类似于

http://www.reddit.com/api/recommend/sr/AskReddit,CasualConversation,?omit=SkypePals,

结果：

[{"sr_name": "ForeverAloneWomen"}, {"sr_name": "southpaws"}, {"sr_name": "deaf"}, {"sr_name": "PointlessStories"}, {"sr_name": "intrusivethoughts"}, {"sr_name": "AMADisasters"}, {"sr_name": "Frat"}, {"sr_name": "GamerPals"}, {"sr_name": "Solving_A858"}, {"sr_name": "FindTheSniper"}]

取决于输入的子版块。在此之后，它只是将 api 变量用作getJSON() 函数的参数，该函数将来自 Reddit 的 JSON 响应返回到 json 变量中。

然后我使用each() 来迭代 JSON 响应，以便将推荐的 subreddits 放入右列（在推荐下方）。

我花了很长时间（几天）试图解决这个问题，但它仍然不起作用。单击提交按钮时，它会刷新页面并使用表单输入的输入将参数添加到地址栏中。我不知道这是为什么。

任何帮助解决此问题并在将来避免此问题将不胜感激。我无法理解这一点。我也找不到任何通过搜索有帮助的东西。我不知道这个问题的名称是什么。

显然，当我链接到 jsFiddle 时，我还需要在这篇文章中提供代码。我认为我的 Javascript 是最相关的，所以我会提供：

$(document).ready(function () {
    var api = "http://www.reddit.com/api/recommend/sr/";
    var json;
    var redditBaseLink = "http://www.reddit.com/r/";
    var srLink;
    var srArray;
    var srString = '';
    var omitArray, omitString;

    $(".srInputForm").submit(function (event) {
        srArray = $(this).serializeArray();
        $.each(srArray, function (i, field) {
            srString += field.value + ",";
        });
        api = api.concat(srString, "?omit=");

        $.each(omitArray, function (i, field) {
            omitString += field.value + ",";
        });
        api = api.concat(omitString);

        json = $.getJSON(api, function () {
            $.each(json, function (i, response) {
                srLink = "";
                srLink = '<div class="recommendation">' + '<a href="' + redditBaseLink + response.sr_name + '/" target="_blank">' + response.sr_name + '</a></div>';

                $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow');
            });
        });

        event.preventDefault;
        event.unbind;
    });
});

谢谢

编辑 1：

我更改了代码，使脚本底部的event.preventDefault; 函数位于submit(); 事件处理程序的顶部。这似乎奏效了，但现在脚本停在另一个地方，就在api = api.concat(srString, "?omit= 行之后，$.each 循环之前省略的 subreddits。

这是我的代码以及我放入的调试内容：

$(document).ready(function () {
    var api = "http://www.reddit.com/api/recommend/sr/";
    var json;
    var redditBaseLink = "http://www.reddit.com/r/";
    var srLink;
    var srArray;
    var srString = '';
    var omitArray, omitString;

    // DEBUG CODE
    var codepoint = 0;
    function debug(alertMsg){
        codepoint++;
        alert(codepoint + ": " + alertMsg + " END MSG (refresh page after no more dialogs!!)");
        // copypasta call debug("");
    }

    $(".srInputForm").submit(function (event) {
        debug("after submit");
        event.preventDefault();
        debug("after preventDefault");
        srArray = $(this).serializeArray();
        debug("serialize array.");
        $.each(srArray, function (i, field) {
            srString += field.value + ",";
        });
        api = api.concat(srString, "?omit=");
        debug("after first api url making (no omit params). api url: " + api); // STOPS AFTER THIS LINE!

        $.each(omitArray, function (i, field) {
            omitString += field.value + ",";
        });
        api = api.concat(omitString);
        debug("final api url making, w/ omit params. api url: " + api);

        json = $.getJSON(api, function () {
            debug("JSON get");
            $.each(json, function (i, response) {
                srLink = "";
                debug("iteration " + i + ". srLink: " + srLink);
                srLink = '<div class="recommendation">' + '<a href="' + redditBaseLink + response.sr_name + '/" target="_blank">' + response.sr_name + '</a></div>';
                debug("iteration " + i + ". srLink (after making): " + srLink);
                $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow');
                debug("iteration " + i + ". after append");
            });
        });
    });
});

我不太确定是否应该为这个新问题创建另一个线程？有人知道我将如何纠正这个问题吗？谢谢。

编辑 2：

大家好。抱歉更新晚了。在学校忙于学习课程！

所以，我已经解决了这篇文章所涉及的项目问题！

我取得部分成功的主要原因之一是将event.preventDefault 移动到submit() 函数的顶部，因为它是一个函数(event.preventDefault())，所以给它加上括号。

如果你想看现在的 JS 代码，这里是：

/* jshint jquery:true*/
// omit feature is buggy. will fix later.

$(document).ready(function () {
    var api = "http://www.reddit.com/api/recommend/sr/";
    var redditBaseLink = "http://www.reddit.com/r/";
    var srLink;
    var srArray;
    var srString = '';
    //var omitArray = [];
    //var omitString;

    /*// DEBUG CODE
    var codepoint = 0;

    function debug(alertMsg) {
        codepoint++;
        alert(codepoint + ": " + alertMsg + " END MSG (refresh page after no more dialogs!!)");
        // copypasta call debug("");
    }*/

    $(".srInputForm").submit(function (event) {
        event.preventDefault();

        srArray = $(this).serializeArray();
        // omitArray = $(".omitForm").serializeArray();

        $.each(srArray, function (i, field) {
            srString += field.value + ",";
        });
        api = api.concat(srString /*, "?omit="*/ );

        /*if (omitArray[1].value === "" && omitArray[2].value === "" && omitArray[3].value === "") {
            api.replace("?omit=", "/");
        } else {
            $.each(omitArray, function (i, field) {
                api += field.value + ",";
            });
        }*/

        $.ajax({
            //dataType: 'jsonp',
            jsonp: false,
            type: 'GET',
            url: api,
            success: function (json) {
                $.each(json, function (i, response) {
                    srLink = '<div class="recommendation">' + '<a href="' + redditBaseLink + response.sr_name + '/" target="_blank">' + response.sr_name + '</a></div>';
                    $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow', function () {
                        console.log("Fade in successful.");
                    });
                    srLink = "";
                });
            },
            error: function () {
                console.log(arguments);
            }
        });
        api = "http://www.reddit.com/api/recommend/sr/";
    });
});

再次感谢大家的帮助。我从中学到了不少东西。

【问题讨论】：

关于您的编辑当我调试它时，萤火虫在您第一次调用concat 后，我在$.each 附近看到一个错误，因为 omitArray 是undefined。
你不使用你的omitArray var，我在代码中没有看到它被定义的任何地方。
你的 ajax 调用是错误的。您没有数据回调。另外，不要使用serializeArray()，而是使用serialize()

标签： javascript jquery html json forms

【解决方案1】：

它刷新页面的原因是因为您正在提交表单。坦率地说，你的问题不是很清楚，但我的理解是当用户点击提交按钮时；您不想提交到表单，而是进行 ajax 调用。您可以使用 event.preventDefault 阻止表单提交。

试着把你的代码改成这样

//Previous code    
.submit(function (event) {
            event.preventDefault();
//code continues

如果这不能解决您的问题，请尝试清理您的问题以使其更清晰易懂。

【讨论】：

Ya OP 使用了event.preventDefault; 没有效果（就像event.unbind）
这些不起作用，因为 preventDefault() 是一个函数，虽然我不知道 event.unbind 但我猜它是另一个函数.
@WolfEdge 检查浏览器控制台。它是否在停止执行的行上抛出错误？

【解决方案2】：

你写的有点小错误，.preventDefault()是一个函数，所以后面要加括号。

$(".srInputForm").submit(function (event) {
    event.preventDefault(); // It is a function, should include parentheses.
    srArray = $(this).serializeArray();
    $.each(srArray, function (i, field) {
        srString += field.value + ",";
    });
    api = api.concat(srString, "?omit=");

    $.each(omitArray, function (i, field) {
        omitString += field.value + ",";
    });
    api = api.concat(omitString);

    json = $.getJSON(api, function () {
        $.each(json, function (i, response) {
            srLink = "";
            srLink = '<div class="recommendation">' + '<a href="' + redditBaseLink + response.sr_name + '/" target="_blank">' + response.sr_name + '</a></div>';

            $(srLink).hide().appendTo(".recommendationsCol").fadeIn('slow');
        });
    });
});

另外，如果你想解除 jQuery 事件与这个对象的绑定，你应该使用：

$(this).unbind('submit');

在event.preventDefault();之后。

瞧！

【讨论】：