Question

我正在建立一个网站，通过使用'Reddit API'为您推荐subreddits。

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

它的工作原理是从表单中获取输入的subreddits并将它们放入一个数组中（使用.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"}]

取决于输入的subreddits。在此之后，它只使用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循环之前。

以下是我输入调试内容的代码：

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

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

Answer 1

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

尝试将代码更改为

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

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

Answer 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();之后。

瞧！

jQuery没有完成正确的提交并在提交时做出意想不到的事情

2 个答案: