php 如何用ajax响应替换html元素？

How to replace html element with ajax response?

提问by Hammad

How do I replace the html element from ajax response? What I know to is to remove the element, how do I replace that removed tag with ajax response? For example:

如何从 ajax 响应中替换 html 元素？我所知道的是删除元素，如何用 ajax 响应替换删除的标签？例如：

I have code like this:

我有这样的代码：

<ul id="products">
...............
</ul>

When I click on a button the ajax call is made to codeginter controller where I recieve the new data pulled from the database and rendered in another view which starts from ul and ends at closing ul.

当我点击一个按钮时，ajax 调用被发送到 codeginter 控制器，在那里我接收从数据库中提取的新数据并在另一个视图中呈现，该视图从 ul 开始并在关闭 ul 时结束。

In ajax success function I do this:

在 ajax 成功函数中，我这样做：

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?

回答by pascalvgemert

You can use replaceWith (see: http://api.jquery.com/replaceWith/)

您可以使用 replaceWith（参见：http://api.jquery.com/replaceWith/ ）

Like: $('#products').replaceWith(response);

喜欢： $('#products').replaceWith(response);

回答by Kim Hogeling

EDIT: The replaceWith function mentioned by pascalvgemert is better https://stackoverflow.com/a/19527642/2887034

编辑：pascalvgemert 提到的 replaceWith 函数更好https://stackoverflow.com/a/19527642/2887034

Create a wrapper around it:

在它周围创建一个包装器：

<div id="wrapper">
    <ul id="products">
    ...............
    </ul>
</div>

Now you can do the following:

现在您可以执行以下操作：

$('#wrapper').html(responseData);

回答by Salman

Assuming you are replacing your products, if you are getting formatted HTML from your controller then simply do this

假设您要更换产品，如果您从控制器获取格式化的 HTML，那么只需执行此操作

success : function(response) {
$('#products').html(response);
}

No need to remove < ul > tag. You can simply replace old < li >s with new < li >s

无需移除 <ul> 标签。你可以简单地用新的 < li >s 替换旧的 < li >s

回答by sdespont

You can use JQuery before

之前可以使用JQuery

$('#products').before("yourhtmlreceivedfromajax").remove();

Or just replace the content of the div with html$('#products').html("yourhtmlreceivedfromajax");

或者只是用html替换div的内容$('#products').html("yourhtmlreceivedfromajax");

回答by Cristian Bitoi

If your main div is inside another container with another id, you could do so:

如果您的主 div 位于另一个具有另一个 id 的容器内，您可以这样做：

Based on this structure:

基于这种结构：

<div id="mainContainer">
    <ul id="products">
         ...............
    </ul>
</div>

Javascript code using jquery for ajax

使用 jquery for ajax 的 Javascript 代码

$.ajax({
  url: "action.php",
  context: document.body
}).done(function(response) {
  $('#products').remove(); // you can keep this line if you think is necessary
  $('mainContainer').html(response);
});

回答by M Khalid Junaid

An easy way is wrap your ul in a container

一种简单的方法是将您的 ul 包装在容器中

<div id="container">
<ul id="products">
...............
</ul>
</div>

in ajax response

在 ajax 响应中

success:function(data){
$("#container").html(data)
}

回答by Andy

.remove()takes the element completely out of the DOM. If you simply want to replace stuff inside the productselement, you use .ReplaceWith().

.remove()将元素完全从 DOM 中取出。如果您只想替换products元素内的内容，请使用.ReplaceWith()。

If you are returning all <li>as HTML, you can use .html()

如果您<li>以 HTML 的形式返回所有内容，则可以使用.html()

回答by zzlalani

Do this

做这个

$( "ul#products" ).replaceWith( response );

http://api.jquery.com/replaceWith/

http://api.jquery.com/replaceWith/