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

Question

I am trying to write a function that will call getproduct.php?id=xxx when clicked. I can get the innerHTML portion to appear, but how do I also call the php page that actually does the work?

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

Answer 1

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

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

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

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

please share you knowledge if i am wrong.

Answer 2

You can do it with jQuery for example.

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

Answer 3

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

---

• 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 (eg cache: true) on the fly.

---

Answer 4

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

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

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

Answer 5

You can use get or post request using query

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

example

Answer 6

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

      }
    });

 }