从变量

Question

检查radiobutton后，我向服务器发出ajax请求。当它返回时，我有一个包含新数据的完整html页面。我只需要一部分代码。如何在请求后用新数据替换旧数据（ajax请求之前的表单）？这是我的代码：

$(".do-ajax").change(function () {
    $.ajax({
        url: "",
        data: { id: this.id },
        type: "POST",
        success: function (data) { //data contains the full new html page.
            console.log($(data)($(".ajax-form").html())); // wrong code and only needed to
                                                          // see what I get
            $(".ajax-form").replaceWith($(data).get(".ajax-form").html()); 
                                                          // $(".ajax-form") must be 
                                                          // replaced
        },
        error: function (data) {
            console.log("probleempje oplossen...");
            console.log(data);
        }
    });
});

我要更新的内容是.ajax-form类，它是form - 属性。

这也是我的服务器代码（C＃背后的语言）：

@using (Html.BeginForm("Nieuw", "Topic", FormMethod.Post, new { @class = "form-horizontal ajax-form", role = "form" }))
{
    @Html.AntiForgeryToken()

    <div class="col-md-4 hfdstk">
        @foreach (var item in Model.Hoofdstukken)
        {
            string jsonid = JsonConvert.SerializeObject(new TopicIdOrde(item.ID, 'h'));
            @Html.RadioButtonFor(m => m.DeHoofdstuk, item.Naam, new { @class = "do-ajax", id = jsonid });
            <label for="@jsonid">@item.Naam</label><br />
        }
    </div>

    <div class="col-md-4 cat">
        @if (Model.Categorien.Count != 0)
        {
            foreach (var item in Model.Categorien)
            {
                @Html.RadioButtonFor(m => m.DeCategorie, item.Naam, new { @class = "do-ajax", id = "c_" + item.ID, value = item.ID.ToString() });
                <label for="c_@item.ID">@item.Naam</label><br />
            }
        }
    </div>
    <div class="col-md-4 items"><!--not implemented--></div>
}

或者（我不知道）在ajax请求之后只发送我需要的东西而不是完整的html页面更好吗？

Answer 1

使用find方法查找jQuery对象中的元素：

$(".do-ajax").change(function () {
  $.ajax({
    url: "",
    data: { id: this.id },
    type: "POST",
    success: function (data) {
      $(".ajax-form").replaceWith($(data).find(".ajax-form"));
    },
    error: function (data) {
      console.log("probleempje oplossen...");
      console.log(data);
    }
  });
});

Answer 2

在你的ajax成功回调函数中尝试这个：$('.ajax-form').html($(data).find('.ajax-form').html())