gpt4 book ai didi

javascript - 使用 jquery 重新解析 html 页面/部分,使用 Ajax 更新某些部分

转载 作者:行者123 更新时间:2023-11-29 15:40:00 26 4
gpt4 key购买 nike

因为我是 jQuery 的新手,所以我在解析从 ajax 检索到的 html 数据时遇到了问题。

我有一个表单,它使用 ajax 发布表单数据并通过添加一个 div(与表单在同一页面上)将内容检索回该页面以显示该数据。

我想对该数据执行一些 jQuery/Javascript 操作,但由于我没有重新加载页面,jQuery 或 javascript 无法解析该数据。

如何强制 javascript 或 jquery 在不加载的情况下重新解析整个页面。

这是代码

html

<div class="col col-lg-9 search-data well">
<div class="no-results">
Search Results will appear here.
</div>
</div>

jQuery

$('.search-form').click(function(e)
{
console.log('same-page');
e.preventDefault();
var form_var = this.form;
var postData = $(this.form).serialize();
var formURL = $(this.form).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
// console.log(data)
$('.search-data').empty(); // Delete all child nodes
$('.search-data').html(data);
},
error: function(jqXHR, textStatus, errorThrown)
{
$('.search-data').empty(); // Delete all child nodes
$('.search-data').html(data);
}
});
return false;
});

谢谢

最佳答案

my question is how can I perform jQuery operations on the data I have got back from server.

如果您想在 添加到页面之前对 HTML 做一些事情,您可以这样做:

var fragment = $(data);

这会将 HTML 解析为元素并为您提供围绕这些元素的 jQuery 包装器,而不将它们添加到页面的任何位置。然后,您可以使用 jQuery 操作它们。最后,当然,如果你想让它们出现在页面上,你必须将它们添加到页面的某个地方(通过 htmlappend 或现有元素上的类似方式) .

data has some a links, I want to parse those links perform some operations on click of them

你可以做到。示例:Live Copy | Live Source

HTML 片段:

<div>
<a href="http://stackoverflow.com">Stack Overflow</a>
<a href="http://w3schools.com" class="remove">w3schools</a>
</div>

这是一个使用它的页面。在这种情况下,我删除了一个我们不想要的链接并将点击事件挂接到剩余的链接上,然后将它们附加到页面:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Modify HTML Before Appending</title>
</head>
<body>
<script>
$.ajax({
url: "http://jsbin.com/IsixODa/1",
dataType: "html",
success: function(data) {
var fragment = $(data);
// Remove some links we don't want
fragment.find(".remove").remove();

// Hook the others
fragment.find("a").click(function() {
alert("You clicked a link: " + this.href);
return false;
});

// Put them on the page
fragment.appendTo(document.body);
},
error: function() {
$("<p>Ajax call failed</p>").appendTo(document.body);
}
});
</script>
</body>
</html>

关于javascript - 使用 jquery 重新解析 html 页面/部分,使用 Ajax 更新某些部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20853946/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com