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

How to load a PHP page into a div with jQuery and AJAX?

提问by Refiking

I am trying to write a function that will call getproduct.php?id=xxxwhen clicked. I can get the innerHTMLportion to appear, but how do I also call the phppage that actually does the work?

我正在尝试编写一个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;

回答by Praveen Sharma

you can call or load php page inside a div using this line as :-

您可以使用此行在 div 内调用或加载 php 页面：-

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

the "ajax/page_url.php" its a relative path of php file.

“ajax/page_url.php”是php文件的相对路径。

so here you can replace it with external url as well.

所以在这里你也可以用外部网址替换它。

please share you knowledge if i am wrong.

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

回答by neumino

You can do it with jQuery for example.

例如，您可以使用 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
});

回答by myk.

There are many ways by which you can load a page into a division .

您可以通过多种方式将页面加载到分区中。

The very method is

方法是

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();
}

this is a typical method with no external reference.

这是一种没有外部参考的典型方法。

If you go with reference then there are 5 ways to make a ajax call with jQuery

如果您参考参考，那么有 5 种方法可以使用 jQuery 进行 ajax 调用

---

---

• load():Load a piece of html into a container DOM.
• jQuery.getJSON():Load a JSON with GET method.
• jQuery.getScript():Load a JavaScript.
• jQuery.get():Use this if you want to make a GET call and play extensively with the response.
• jQuery.post():Use this if you want to make a POST call and don't want to load the response to some container DOM.
• jQuery.ajax():Use this if you need to do something when XHR fails, or you need to specify ajax options (e.g. cache: true) on the fly.

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

---

---

回答by Steven Moseley

Edit:the original question didn't reference jQuery. Leaving this answer here as others may find it useful.

编辑：原始问题没有引用 jQuery。将此答案留在这里，因为其他人可能会觉得它很有用。

Here's how you would do this using the XHR object for an ajax request without jQuery or Prototype or other JS library.

以下是在不使用 jQuery 或 Prototype 或其他 JS 库的情况下，将 XHR 对象用于 ajax 请求的方法。

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();
}

回答by Sonu Sindhu

You can use get or post request using query

您可以使用查询使用获取或发布请求

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

example

例子

回答by njoshsn

Hi You can call the below function to perform this it loads the data from server on success you can create fail function as well

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

 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

      }
    });

 }