正确更新div中的数据AJAX(ASP.NET MVC)

时间:2017-04-13 07:35:04

标签: javascript jquery css asp.net ajax

我有div,我通过AJAX在页面加载上显示数据

$(document).ready(function () {
    email_update();
});

function email_update() {
    $.ajax({
        url: '@Url.Action("EmailsList", "Questions")',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json',
        processData: false,
        success: function (result) {
            var email = result;
            // console.log(result[0].Name);
            for (var i = 0; i <= email.length - 1; i++) {
                var emailHTML = '<div style="margin-left: 25px; margin-top: 10px;>' +
                    '<b style="margin-left: 10px;">' +(i + 1) +
                    '<b style="margin-left:20px;">' + result[i].Email + '</b>'+
                    '<b>' +
                    '<b style="margin-left: 20px;">' +
                    result[i].Name +
                    '</b>' +
                    '</div>';
                $(".email_list").append(emailHTML);
            }
        }
    });
}

我有模态窗口输入数据,当我点击create按钮时,我需要用新数据更新这个div。现在我用上面的代码来做。但它重复数据。我需要删除旧的并填写新的。或者更新。

我怎么能这样做?

2 个答案:

答案 0 :(得分:0)

我可能误解了这个问题,但我认为你需要将其移出你的for循环。

$(".email_list").append(emailHTML);

答案 1 :(得分:0)

请尝试以下代码我会工作。它会删除你旧的Div细节。 如果有任何困难,请告诉我。

 function email_update() {
$.ajax({
    url: '@Url.Action("EmailsList", "Questions")',
    contentType: 'application/json; charset=utf-8',
    type: 'GET',
    dataType: 'json',
    processData: false,
    success: function (result) {
  var emailHTML = "";
        $(".email_list").text = "";

        var email = result;
        // console.log(result[0].Name);
        for (var i = 0; i <= email.length - 1; i++) {
          emailHTML   = '<div style="margin-left: 25px; margin-top: 10px;>' +
                '<b style="margin-left: 10px;">' +(i + 1) +
                '<b style="margin-left:20px;">' + result[i].Email + '</b>'+
                '<b>' +
                '<b style="margin-left: 20px;">' +
                result[i].Name +
                '</b>' +
                '</div>';
            $(".email_list").append(emailHTML);
        }
    }
});

}