Question

我有这个AJAX代码：

$.ajax({
    target: "#map",
    dataType: "json",
    type: 'GET',
    data: {
        query: query
    },
    url: 'http://localhost:8080/path/urllinks',
    success: function(response) {
        successCallback(response);
    }

});

function successCallback(responseObj) {

      #I tried adding the suggested answers here but it's not working.

  var table_0 = document.createElement('table');   
  if ( responseObj.length == 0 ) {

      var p_0 = document.createElement('p');
       p_0.appendChild( document.createTextNode(" Search is keyword :"+query + " does not exist in our record") );
    document.body.appendChild( p_0 );

    }

  $.each(responseObj, function(index, element){


         var tr_0 = document.createElement('tr');

            var td_0 = document.createElement('td');
               td_0.style.fontSize = "18px";
               td_0.style.textDecoration = "underline";
               td_0.style.color = "blue";

               var a_0 = document.createElement('a');
                  a_0.href = element.link;
                  a_0.appendChild( document.createTextNode(element.title) );
               td_0.appendChild( a_0 );

            tr_0.appendChild( td_0 );

         table_0.appendChild( tr_0 );


         var tr_1 = document.createElement('tr');

            var td_1 = document.createElement('td');
               td_1.style.color = "green";
               td_1.style.fontSize = "14px";

               var p_0 = document.createElement('p');
                  p_0.appendChild( document.createTextNode(element.link) );
               td_1.appendChild( p_0 );

            tr_1.appendChild( td_1 );

         table_0.appendChild( tr_1 );


         var tr_2 = document.createElement('tr');
            tr_2.style.height = "30px";
         table_0.appendChild( tr_2 );

      document.body.appendChild( table_0 );

  });       

   }

在我的JSP页面中，我将目标div元素放在：

<div id="map"></div>

每次按表单提交时，AJAX会附加结果，列表会不断增长。我想在#map中实际有一个新的结果表。

Answer 1

你的代码中有这一行：

document.body.appendChild( table_0 );

，告诉您的document对象（您的网页）找到body标记，然后附加table_0的内容（所以，您不会将表附加到#map元素，但始终位于页面的末尾...

将document.body.appendChild( table_0 );替换为$("#map").html(table_0);

然后，$("#map").empty();将在此函数调用的开头工作。

顺便说一句。有一些更简单的方法可以从头开始创建一个表...当您获得已经在JSON中的数据时，请查看DataTables插件，更多信息在Ajax sourced data ...

Answer 2

您是否尝试删除成功回调函数中的div内容？

，例如，您可以使用jquery $（＆＃39; #map＆＃39;）。empty（）删除所有子元素，然后附加新数据。

或者，我也可以在成功回调函数中执行$（＆＃39; #map＆＃39;）。html（响应）。

希望它有所帮助。

阻止Ajax附加到DIV

2 个答案: