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;

Ugh... wish I had your reply before writing out my answer the long way. Next time, you should add that type of information in your original post. — Steven Moseley
– Steven Moseley, Commented Jul 8, 2013 at 5:01
Still doesn't make 'the long way' any less valid, plus you wrote it in a few minutes, so. — icedwater
– icedwater, Commented Jul 8, 2013 at 5:02
Is it useful to add the tag words into the title, @StevenMoseley? I generally remove them, because I think titles should be short and tags should help with the searching. — icedwater
– icedwater, Commented Jul 8, 2013 at 5:05
@icedwater - Adding tag words to the title helps people find the Q&A easier on Google. I always try to make titles match what I would search Google for if I were seeking info on the topic. — Steven Moseley
– Steven Moseley, Commented Jul 8, 2013 at 5:07

Praveen Sharma · Accepted Answer · 2013-07-08 05:01:10Z

15

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.

answered Jul 8, 2013 at 5:01

Praveen Sharma

4,3585 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

Not sure why this isn't the accepted answer. Less code and works.

neumino · Accepted Answer · 2013-07-08 04:58:44Z

9

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

answered Jul 8, 2013 at 4:58

neumino

4,3531 gold badge21 silver badges17 bronze badges

Comments

Myb · Accepted Answer · 2017-02-21 04:36:33Z

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.

Steven Moseley · Accepted Answer · 2013-07-08 05:00:19Z

1

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

answered Jul 8, 2013 at 5:00

Steven Moseley

16.4k4 gold badges43 silver badges50 bronze badges

Comments

Stephen Ngethe · Accepted Answer · 2017-03-30 10:37:45Z

1

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

      }
    });

 }

answered Mar 30, 2017 at 10:37

Stephen Ngethe

1,04413 silver badges24 bronze badges

Comments

Sonu Sindhu · Accepted Answer · 2013-07-08 05:02:26Z

0

You can use get or post request using query

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

example

answered Jul 8, 2013 at 5:02

Sonu Sindhu

1,80216 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related