jQuery无法正确完成提交，并在提交时执行意外操作

我正在制作一个网站，通过使用"Reddit API"为您推荐子Reddit。

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

它的工作原理是从表单中获取输入的子版块并将它们放在数组中（使用 .serializeArray() ）。我也使用相同的函数从第二种形式中获取省略的子版块。然后，它获取值并将它们放在一个字符串中。最终结果（在 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() 函数的参数，该函数将 JSON 响应从 Reddit 返回到 json 变量中。

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

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

任何帮助解决此问题并避免将来发生这种情况将不胜感激。我无法理解这一点。我也找不到任何有助于搜索的东西。我不完全知道这个问题的名称是什么。

显然，当我链接到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=行之后，在省略的子 reddit 的$.each循环之前。

这是我的代码，其中包含我放入的调试内容：

$(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/";
    });
});

再次感谢所有的帮助。我从中学到了很多东西。