Question

我有一些代码在提交表单时发送ajax请求。这是第一次提交表单（它是一个搜索模块），但只有一次。我添加了一个效果来在返回数据时突出显示该表，并且您只能看到它一次（数据也只改变一次）。

当我查看chrome dev工具中的响应时，我可以看到它包含新搜索查询的数据但是没有显示。为什么我只能显示一次结果？

JS：

$(function () {
// Creates an ajax request upon search form submit
 var ajaxFormSubmit = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-nn-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");
    });

    // Prevent default action
    return false;
 };

 $("form[data-nn-ajax='true']").submit(ajaxFormSubmit);
});

HTML：

<form method="GET" action="@Url.Action("Index", "Show")" data-nn-ajax="true" data-nn-target="#contentlist" class="form-search">
    <div class="input-append mysearch">
        <input type="search" class="span5 search-query" name="query" data-nn-autocomplete="@Url.Action("AutoComplete")" />
        <input type="submit" class="btn" value="Search" />
    </div>
</form>

<div id="contentlist">
    @Html.Partial("_Shows", Model)
</div>

Answer 1

我认为您应该使用html()代替replaceWith()方法：

$target.html($newHtml);

Answer 2

只是一个想法...尝试

$target.html(data);

而不是

$target.replaceWith($newHtml);

通过replaceWith，您实际上可能会删除要填充内容的div。然后，第二次，它找不到要插入内容的div。

来自AJAX请求的响应仅显示一次

2 个答案: