javascript - jQuery 无法完成提交并在地址中添加参数

Question

编辑:更新了 jsFiddle 链接。参见第二句。

我正在创建一个网站，通过使用 subreddit API 为您推荐 subreddit。 该项目是here 。目前，最好在最大化的浏览器窗口中查看该网站，因为我还没有完成前端的工作。

它的工作原理是从表单中获取输入的 subreddits，将其放入数组中(使用 .serializeArray())。我还使用相同的函数从第二种形式中获取省略的 subreddits。然后它获取值并将它们放在一个字符串中。最终结果(在 api 变量中)应该类似于 http://www.reddit.com/api/recommend/sr/AskReddit,CasualConversation,?omit=SkypePals,取决于输入的子版 block 。 此后，它只是使用 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);

        $.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;
    });
});

谢谢

Answer 1

您的 event.preventDefault 中有一个拼写错误，应该是

event.preventDefault();

另外，检查 $.getJSON 的正确用法，您的 $.each 应该位于 $.getJSON 成功回调内。

例如

$.getJSON("ajax/test.json", function(data) {
    // $.each() here.
});