Javascript jQuery赢得'；未正确完成提交，并在提交时做了意外的事情

我正在制作一个网站，通过使用“RedditAPI”为您推荐subreddits

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

它的工作原理是从表单中获取输入的子Reddit并将它们放入数组中（使用

.serializeArray（）

）。我还使用相同的函数从第二个表单中获取省略的子reddit。然后它获取这些值并将它们组合成一个字符串。最终结果（在api变量中）应该是

结果是：

[{"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响应进行迭代，以便将建议的子reddit放入右侧列（建议下方）

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

如果您能帮助解决此问题并在将来避免此问题，我们将不胜感激。我无法理解这件事。我也无法通过搜索找到任何有用的东西。我不知道这个问题的确切名称

显然，我在这篇文章中还需要提供代码，因为我链接到了JSFIDLE。我认为我的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;
    });
});

我不太确定我是否应该为这个新问题再做一个帖子？有人知道我该怎么纠正这个吗？谢谢

编辑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/";
    });
});

/*jshint jquery:true*/
//忽略功能有问题。将稍后修复。
$（文档）.ready（函数（）{
变量api=”http://www.reddit.com/api/recommend/sr/";
var redditBaseLink=”http://www.reddit.com/r/";
var-srLink；
srvar阵列；
var srString=''；
//变量数组=[]；
//变量省略字符串；
/*//调试代码
var码点=0；
函数调试（alertMsg）{
codepoint++；
警报（codepoint+“：“+alertMsg+”结束消息（在没有更多对话框后刷新页面！！）”；
//复制调用调试（“”）；
}*/
$（“.srInputForm”）.submit（函数（事件）{
event.preventDefault（）；
srArray=$（this.serializeArray（）；
//omitArray=$（“.omitForm”）.serializeArray（）；
$.each（sr数组、函数（i、字段）{
srString+=field.value+“，”；
});
api=api.concat（srString/*，“？omit=“*/）；
/*如果（忽略数组[1]。值==“”&&忽略数组[2]。值==“”&&忽略数组[3]。值==“”）{
api.替换（“？省略=“，”/”）；
}否则{
$.each（省略数组、函数（i、字段）{
api+=字段值+“，”；
});
}*/
$.ajax({
//数据类型：“jsonp”，
jsonp:false，
键入：“GET”，
url:api，
成功：函数（json）{
$.each（json，函数（i，响应）{
srLink=''+''；
$（srLink.hide（）.appendTo（“.recommendationsCol”）.fadeIn（'slow'，function（）{
log（“淡入成功”）；
});
srLink=“”；
});
},
错误：函数（）{
log（参数）；
}
});
api=”http://www.reddit.com/api/recommend/sr/";
});
});

---

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

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

尝试将代码更改为

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

---

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

您在编写过程中犯了一个小错误，

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

在

事件之后。preventDefault（）；

---

瞧！

Ya OP使用的是

event.preventDefault；

没有效果（就像

event.unbind

）这些都不起作用，因为preventDefault（）是一个函数，虽然我不知道event.unbind，但我猜它是另一个函数。@WolfEdge检查浏览器控制台。它是否在停止执行的行上抛出错误？关于调试它时的编辑firebug，我在

$附近看到一个错误。在第一次
concat
调用后，每个
，因为omitArray是
未定义的。您没有使用
忽略数组
变量，我看不到代码中定义它的任何地方。您的ajax调用是错误的。您没有对数据的回调。此外，使用
序列化数组（）
而不是
序列化（）
$(".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');
        });
    });
});

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