php JQuery/AJAX：使用动态内容加载外部 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/919722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery/AJAX: Loading external DIVs using dynamic content
提问by ticallian
I need to create a page that will load divs from an external page using Jquery and AJAX.
我需要创建一个页面，该页面将使用 Jquery 和 AJAX 从外部页面加载 div。
I have come across a few good tutorials, but they are all based on static content, my links and content are generated by PHP.
我遇到了一些很好的教程，但它们都是基于静态内容的，我的链接和内容都是由PHP生成的。
The main tutorial I am basing my code on is from:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
我的代码基于的主要教程来自：http:
//yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
The exact function i need is as follows:
我需要的确切功能如下：
- Main page contains a permanent div listing some links containing a parameter.
- Upon click, link passes parameter to external page.
- External page filters recordset against parameter and populates div with results.
- The new div contains a new set of links with new parameters.
- The external div is loaded underneath the main pages first div.
- Process can then be repeated creating a chain of divs under each other.
- The last div in the chain will then direct to a new page collating all the previously used querystrings.
- 主页包含一个永久 div，其中列出了一些包含参数的链接。
- 单击后，链接将参数传递给外部页面。
- 外部页面根据参数过滤记录集并用结果填充 div。
- 新 div 包含一组具有新参数的新链接。
- 外部 div 加载在主页第一个 div 下方。
- 然后可以重复该过程，在彼此之下创建一个 div 链。
- 链中的最后一个 div 将指向一个新页面，整理所有以前使用的查询字符串。
I can handle all of the PHP work with populating the divs on the main and external pages.
It's the JQuery and AJAX part i'm struggling with.
我可以通过在主页面和外部页面上填充 div 来处理所有 PHP 工作。
这是我正在努力解决的 JQuery 和 AJAX 部分。
$(document).ready(function(){
var sections = $('a[id^=link_]'); // Link that passes parameter to external page
var content = $('div[id^=content_]'); // Where external div is loaded to
sections.click(function(){
//load selected section
switch(this.id){
case "div01":
content.load("external.php?param=1 #section_div01");
break;
case "div02":
content.load("external.php?param=2 #section_div02");
break;
}
});
The problem I am having is getting JQuery to pass the dynamically generated parameters to the external page and then retrieve the new div.
I can currently only do this with static links (As above).
我遇到的问题是让 JQuery 将动态生成的参数传递给外部页面，然后检索新的 div。
我目前只能使用静态链接（如上）执行此操作。
回答by Scotty
I'm not sure if you've solved this already, but I'm surprised no one's mentioned to use the ajax() function.
我不确定你是否已经解决了这个问题，但我很惊讶没有人提到使用 ajax() 函数。
This would allow you to define the request type as GET:
这将允许您将请求类型定义为 GET：
function loadContent(id) {
$.ajax({
type: "GET",
url: "external.php",
dataType: 'html',
data: {param: id},
success: function(html){
$("#container").html(html);
},
error: function(){
},
complete: function(){
}
});
}
Just call this function instead of using load. Obviously you'll have to tinker with the code (mainly what goes in the success function) a little, but this should give you a good starting point.
只需调用此函数而不是使用负载。显然，您必须稍微修改代码（主要是成功函数中的内容），但这应该为您提供一个良好的起点。
回答by kgiannakakis
You can use the optional data argument to pass parameters to the GET request. Read the documentation. This is far better than building the URL yourself. You can of course add dynamic generated data to the parameters list.
您可以使用可选的数据参数将参数传递给 GET 请求。阅读文档。这比自己构建 URL 要好得多。您当然可以将动态生成的数据添加到参数列表中。
回答by waraker
This tutorial on loading AJAX content is good:
这个关于加载 AJAX 内容的教程很好：
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Especially the part explaining how to read the results with Firebug.
特别是解释如何使用 Firebug 读取结果的部分。
回答by AdagioDev
Use this :
用这个 ：
function GetDiv(id) {
$.ajax({
type: "GET",
url: "external.php"
dataType: 'html',
data:id,
success: function(html){
$("#container").append(html);
},
});
}
回答by Jet
function loadDiv(evt)
{
// these params will be accessible in php-script as $_POST['varname'];
var params = {name:'myDiv', var1:123, var2:'qwer'};
$.post('http://host/divscript.php', params, onLoadDiv);
}
function onLoadDiv(data)
{
$('#myContainer').html(data);
}
$(document).ready(function() {
$('#divButton').click(loadDiv);
});
In this example server-side script should return inner content of your div. Sure you can return XML-serialized data or JS to eval etc... it depends on task. The example is simplified, so extend it to fit your needs.
在此示例中，服务器端脚本应返回 div 的内部内容。当然，您可以将 XML 序列化数据或 JS 返回到 eval 等……这取决于任务。该示例已简化，因此请对其进行扩展以满足您的需求。
回答by gregers
var params = {
param: 1,
otherParam: 2
};
content.load("external.php #section_div01", params);
will load "external.php?param=1&otherParam=2"
将加载“external.php?param=1&otherParam=2”
