如何使用jQuery和AJAX将PHP页面加载到一个div中？

Question

我正在尝试编写一个函数，当点击时会调用getproduct.php?id=xxx。 我可以让innerHTML部分显示出来，但是如何同时调用实际执行工作的php页面呢？

var id = id;
document.getElementById("digital_download").innerHTML = 
    "Downloading...Please be patient. The process can take a few minutes."; 
url = getproduct.php?id=id;

- Refiking

---

你正在使用任何jQuery或其他JS框架吗？ - Steven Moseley

唉...真希望在我费尽周折地写出答案之前就能得到你的回复。下次，你应该在原始帖子中添加那种类型的信息。 - Steven Moseley

仍然不会使“长路漫漫”变得无效，而且你只用几分钟写出来的，所以。 - icedwater

将标签词添加到标题中是否有用，@StevenMoseley？我通常会将它们删除，因为我认为标题应该简短，而标签应该帮助搜索。 - icedwater

@icedwater - 在标题中添加标签词可以帮助人们更容易地在Google上找到问答。我总是尽力使标题与我在搜索有关主题的信息时会使用的关键词匹配。 - Steven Moseley

我在这个讨论中通常会偏向保守的一面：http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles/ 我喜欢问题标题要具体描述问题，并且尽可能地简短，以便一目了然。那个问题的最佳答案告诉我，即使标题中没有标签词，结果也能正确显示，而且似乎我不是唯一这样想的人。只是一个次要的讨论 :) - icedwater

Answer 1

您可以使用以下代码将PHP页面以调用或加载的方式嵌入到div中：

$("#content_div").load("ajax/page_url.php");

"ajax/page_url.php"是一个PHP文件的相对路径。

因此，您也可以将其替换为外部URL。

如果我有错误，请分享您的知识。

- Praveen Sharma

---

不确定为什么这不是被接受的答案。代码更少，而且有效。 - Andrew

Answer 2

你可以使用jQuery来实现它。

var id = 1;
$('#digital_download').html('Downloading...'); // Show "Downloading..."
// Do an ajax request
$.ajax({
  url: "getproduct.php?id="+id
}).done(function(data) { // data what is sent back by the php page
  $('#digital_download').html(data); // display data
});

- neumino

Answer 3

有许多方法可以将页面加载到一个div中。其中一种方法是：

首先：

var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById('digital_download').innerHTML=xmlhttp.responseText;
    }
}
   xmlhttp.open("GET", 'getproduct.php?id=' + id,true);
   xmlhttp.send();
}

这是一种没有外部引用的典型方法。

如果您选择使用引用，那么有5种方法可以使用jQuery进行ajax调用：

---

• load(): 将一段html加载到一个容器DOM中。
• jQuery.getJSON(): 使用GET方法加载JSON。
• jQuery.getScript(): 加载JavaScript。
• jQuery.get(): 如果您想进行GET调用并对响应进行广泛操作，请使用此选项。
• jQuery.post(): 如果您想进行POST调用并且不想将响应加载到某个容器DOM中，请使用此选项。
• jQuery.ajax(): 如果您需要在XHR失败时执行某些操作，或者需要在运行时指定ajax选项（例如cache: true），请使用此选项。

---

- myk.

Answer 4

您可以调用以下函数来执行此操作：它从服务器加载数据，成功后您也可以创建失败函数。

 function setValue(Id) {
 document.getElementById("digital_download").innerHTML = 
"Downloading...Please be patient. The process can take a few minutes.";
 var data1 = {
        message: Id,
    };

    $.ajax({
      data: data1,
      type: 'GET',
      url: "http://urltoscript/index.php",
     cache: false,
        dataType: "json",
        crossDomain: true,
        success: function(data) {
        console.log("Response for cancel is: " + data);

     document.getElementById("digital_download").innerHTML =  data

      }
    });

 }

- Stephen Ngethe

Answer 5

编辑：原问题没有提及jQuery。将此答案保留，因为其他人可能会发现它有用。

以下是使用XHR对象进行ajax请求的方法，无需jQuery、Prototype或其他JS库。

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('digital_download').innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", 'getproduct.php?id=' + id,true);
    xmlhttp.send();
}

- Steven Moseley

Answer 6

你可以使用查询来进行GET或POST请求。

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

示例

- Sonu Sindhu