如何在ajax调用成功功能期间将html内容插入特定的div元素？

Question

使用下面的 ajax 脚本，我想将 html 内容插入到表中的 div 元素之一。如您所见，我有一个名为 "ajaxcom" 的主 div 元素，但我想将 html 内容插入到具有 class= "divrep" 的 div 元素中。 ajax调用成功函数时，如何在"divrep"元素中插入html数据？

Ajax 脚本：

$('#ajaxcom').on('click ', '.postrep', function () {
    var inputs = $(this).closest('div').find('input'); //finding the inputs inside the div
    var textin = $(this).closest('div').find('textarea'); //finding the textarea inside the div
    var dataObject = {
        Id: inputs.first().val(), //getting the value of the first input
        name: $(this).closest('div').find('input[class="name"]').val(), //getting/finding the value of any element inside the div
        reply: textin.first().val() //getting the value of the first textarea in the div
    };

    $.ajax({

        url: '/AjaxComms/AjaxReplies',
        type: "POST",
        data: dataObject,
        dataType: "json",
        success: function (result) {

            $.ajax({
                url: '/AjaxComms/DisplayRepPartial',
                type: "GET",
                contentType: 'application/html; charset=utf-8',
                data: dataObject,
                dataType: "html",
                success: function (result) {
                    //  $('#ajaxcom').html(result);
                    // On this part, this where I'm struggling????
                    var findiv = $(this).closest('table').find('div[class="divrep"]');
                    //   $('.divrep').html(result);
                    //  var findiv = $(this).closest('table').find('div[class="divrep"]');
                    // $(findiv).html(result);
                    findiv.html(result);

                }
            })
        },
        error: function (result) {
            alert(status);
        }
    });
});

/**Hint Part of the Ajax Call:**/

$.ajax({
    url: '/AjaxComms/DisplayRepPartial',
    type: "GET",
    contentType: 'application/html; charset=utf-8',
    data: dataObject,
    dataType: "html",
    success: function (result) {
        //  $('#ajaxcom').html(result);
        // On this part, this where I'm struggling????
        var findiv = $(this).closest('table').find('div[class="divrep"]');
        //   $('.divrep').html(result);
        //  var findiv = $(this).closest('table').find('div[class="divrep"]');
        // $(findiv).html(result);
        findiv.html(result);
    }
})

HTML 视图：

<div id="ajaxcom">
    <table id="mytable">@foreach (var item in Model.Comments) {
        <tr>
            <td>
                <div style="font-weight:bold;">@Html.DisplayFor(modelItem => item.name)</div>
                <p class="comment more" style="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">@Html.DisplayFor(modelItem => item.comment)</p>
                <p style="height:5px;margin-top:0px;margin-bottom:5px">
                    <input type="button" id="like" name="like" value="Like" style="font-weight:normal;margin-top:0px; color:blue;border:0px;background-color:inherit;cursor:pointer" />
                    <input type="button" class="Reply" name="Reply" value="Replie(s)" style="margin-bottom:10px;font-weight:normal;margin-top:0px; color:blue;border:0px;background-color:inherit;cursor:pointer" />
                </p>
                <div id="divReply" class="divrep" style=" position:relative;left:57px; overflow:auto;margin-top:0px;margin-bottom:0px">
                    <table>@foreach (var item2 in Model.Replies.Where(r => r.Id == item.Id) ) {
                        <tr>
                            <td>
                                <div style="font-weight:bold;">@Html.DisplayFor(modelItem => item2.name)</div>
                                <p class="comment more" style="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px;  display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply)</p>
                            </td>
                        </tr>}</table>
                    <div>
                        <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">
                            <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
                        </div>
                        <br />
                        <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" />
                        <br />
                        <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none"></textarea>
                        <br />
                        <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" />
                    </div>
                </div>
                <br />
            </td>
        </tr>}</table>
</div>

Answer 1

this ajax 成功函数内的对象是指 Ajax 调用的 jqXHR 对象，而不是事件处理程序绑定到的元素。所以只需使用以下

$('#ajaxcom .postrep').closest('table').find('div.divrep').html(result);

---

或在事件处理程序的开头设置var $this = $(this);，并在ajax成功回调函数中使用$this而不是$(this)。

$('#ajaxcom').on('click ', '.postrep', function () {
    var $this = $(this);
    //...^........................
    ......................
    ......................
    $.ajax({
        url: '/AjaxComms/AjaxReplies',
        type: "POST",
        data: dataObject,
        dataType: "json",
        success: function (result) {
            $.ajax({
                url: '/AjaxComms/DisplayRepPartial',
                type: "GET",
                contentType: 'application/html; charset=utf-8',
                data: dataObject,
                dataType: "html",
                success: function (result) {
                    var findiv = $this.closest('table').find('div.divrep');
                    //............^...................
                    findiv.html(result);
                }
            })
        },
        ....................
        ....................
    });
});

Answer 2

你的问题在于这一行：

var findiv = $(this).closest('table').find('div[class="divrep"]');

ajax 成功处理程序中 this 的值是 ajax 对象，而不是您的 dom 元素。

您有多种选择：

1. 在 ajax 调用之前将所需的值保存在局部变量中，如 var self = this; 并引用 self。

2. 为 jQuery ajax 调用设置 context 参数，以在成功处理程序中根据需要设置 this。

3. 使用不需要this的更完整的选择器。

---

因为你有嵌套的 ajax 调用，可能最简单的做法是把：

var self = this;

在事件处理程序的开头，然后您可以在任一 ajax 成功处理程序中引用 self 以获取对 DOM 对象的点击。