CODEWITHSUNDEEP
phpjavascriptjqueryajax
Refiking
Refiking

Reputation: 641

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

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;

Upvotes: 7

Views: 70014

Answers (6)

Stephen Ngethe
Stephen Ngethe

Reputation: 1044

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

      }
    });

 }

Upvotes: 1

myk.
myk.

Reputation: 333

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

Upvotes: 2

Sonu Sindhu
Sonu Sindhu

Reputation: 1792

You can use get or post request using query 

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

example

Upvotes: 0

Praveen Sharma
Praveen Sharma

Reputation: 4348

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.

Upvotes: 15

Steven Moseley
Steven Moseley

Reputation: 16355

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

Upvotes: 1

neumino
neumino

Reputation: 4353

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

Upvotes: 9

Related Questions