用 Ajax 响应替换 div 的内部 HTML答案

【问题标题】：Replace inner HTML of a div with Ajax response用 Ajax 响应替换 div 的内部 HTML
【发布时间】：2013-01-28 21:19:56
【问题描述】：

我正在尝试在一段时间后更改 div 的内部 HTML。我得到了我想要的 Ajax 的正确响应。但无法用 Ajax 响应替换选定的内部 HTML。我的代码有什么问题..

HTML

      <p class="time ui-li-desc" data-time="2013-02-13 11:30:08" >
    51 seconds ago<img alt="image" src="images/read.png"></p>

      <p class="time ui-li-desc" data-time="2013-02-13 11:30:16" >
    58 seconds ago<img alt="image" src="images/read.png"></p>
.
.
.
.
.
      <p class="time ui-li-desc" data-time="2013-02-13 11:40:08" >
    10 minute ago<img alt="image" src="images/read.png"></p>

j 查询

setInterval(function() { 
            $( ".time" ).each(function( index ) {
                var sendTime=  $(this).attr("data-time");
                dataString = "sendtime="+sendTime+"&q=convertTime";
                $.ajax({
                    type: "POST",
                    url: "data_handler.php",
                    data: dataString,                   
                    cache: true,
                    success: function(response) {
                        alert(response);
                        $(this).html(response);
                        //alert(response);
                    }
                });
            });
        }, 5000);

【问题讨论】：

运行时会发生什么？

标签： javascript jquery html ajax

【解决方案1】：

this 是回调中的窗口。使用给每个 callback 的值：

        $( ".time" ).each(function(index , elem) {
            var sendTime=  $(this).attr("data-time");
            dataString = "sendtime="+sendTime+"&q=convertTime";
            $.ajax({
                type: "POST",
                url: "data_handler.php",
                data: dataString,                   
                cache: true,
                success: function(response) {
                    alert(response);
                    $(elem).html(response);
                }
            });
        });

你不需要需要定义一个新变量来保护this，因为jQuery已经为你做了。

【讨论】：

【解决方案2】：

setInterval(function() { 
        $( ".time" ).each(function( index ) {
            var sendTime=  $(this).attr("data-time");
            var _thisvariable = $(this);
            dataString = "sendtime="+sendTime+"&q=convertTime";
            $.ajax({
                type: "POST",
                url: "data_handler.php",
                data: dataString,                   
                cache: true,
                success: function(response) {
                    alert(response);
                    _thisvariable.html(response);
                    //alert(response);
                }
            });
        });
    }, 5000);

【讨论】：

【解决方案3】：

我认为 $(this) 是断章取义的。试试：

setInterval(function() { 
            $( ".time" ).each(function( index ) {
                var $this = $(this);
                var sendTime=  $(this).attr("data-time");
                dataString = "sendtime="+sendTime+"&q=convertTime";
                $.ajax({
                    type: "POST",
                    url: "data_handler.php",
                    data: dataString,                   
                    cache: true,
                    success: function(response) {
                        alert(response);
                        $this.html(response);
                        //alert(response);
                    }
                });
            });
}, 5000);

【讨论】：

【解决方案4】：

当您使用带有回调的异步函数时，您的回调中的this 并非来自相同的上下文。您需要将this 保存在回调中使用的变量中。

试试这样：

setInterval(function() { 
            $( ".time" ).each(function( index ) {
                var sendTime=  $(this).attr("data-time");
                dataString = "sendtime="+sendTime+"&q=convertTime";
                var self = this;
                $.ajax({
                    type: "POST",
                    url: "data_handler.php",
                    data: dataString,                   
                    cache: true,
                    success: function(response) {
                        alert(response);
                        $(self).html(response);
                        //alert(response);
                    }
                });
            });
        }, 5000);

【讨论】：

这增加了无用的代码：jQuery 已经声明了一个变量...查看我的答案。