我想对HTML返回页面进行AJAX调用,提取部分HTML(使用jQuery选择器),然后在基于jQuery的JavaScript中使用该部分.
在AJAX检索是非常简单的.这给了我回调函数的"data"参数中的整个HTML文档.
我不明白的是如何以有用的方式处理这些数据.我想将它包装在一个新的jQuery对象中,然后使用一个选择器(通过我相信的find())来获得我想要的部分.一旦我有了,我将把它传递给另一个JavaScript对象以插入我的文档.(这个委托就是为什么我首先不使用jQuery.load()).
我看到的get()示例似乎都是对此的变体:
$('.result').html(data);
Run Code Online (Sandbox Code Playgroud)
...如果我理解正确的话,将整个返回的文档插入到选定的元素中.这不仅是可疑的(这不是插入<head>
等等吗?)但它太粗糙了我想要的东西.
关于替代方法的建议是非常受欢迎的.
Sam*_*son 48
您可以使用标准选择器语法,并将其data
作为选择器的上下文传递.data
在这种情况下,第二个参数是我们的上下文.
$.post("getstuff.php", function(data){
var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");
Run Code Online (Sandbox Code Playgroud)
这相当于:
$(data).find("#mainDiv");
Run Code Online (Sandbox Code Playgroud)
根据您计划如何使用它,$.load()
可能是一个更好的路径,因为它允许URL和选择器过滤结果数据,这些数据直接传递给调用该方法的元素:
$("#mylocaldiv").load("getstuff.php #mainDiv");
Run Code Online (Sandbox Code Playgroud)
这会将<div id='mainDiv'>...</div>
in 的内容加载getstuff.php
到我们的本地页面元素中<div id='mylocaldiv'>...</div>
.
您可以使用load
新元素,并将其传递给函数:
function handle(element){
$(element).appendTo('body');
}
$(function(){
var div = $('<div/>');
div.load('/help a', function(){handle(div);});
});
Run Code Online (Sandbox Code Playgroud)
示例: http: //jsbin.com/ubeyu/2
您可以创建一个div
然后将HTML放入其中,就像这样......
var div = $("<div>").html(data);
Run Code Online (Sandbox Code Playgroud)
...然后像这样过滤数据......
var content = $("#content", div.get(0));
Run Code Online (Sandbox Code Playgroud)
......然后使用它.
这可能看起来很危险,因为您正在创建一个元素并将任意HTML放入其中,但事实并非如此:任何危险(如script
标记)只会在插入文档时执行.在这里,我们将数据插入到元素中,但该元素永远不会放入文档中; 只有当我们插入content
到文档中时才会插入任何内容,即使这样,也只会content
插入任何内容.
归档时间: |
|
查看次数: |
42689 次 |
最近记录: |