jQuery Ajax returns the whole page

Question

I have a jquery-ajax function that sends data to a php script and the problem is with the return value, it returns the whole page instead of single value.

Thank you for your time and help.

$("#ajaxBtn").click(function(){
  var inputText = $("#testText").val();

  $.ajax({ type: "POST",
    url: "index.php",
    data: "testAjax="+inputText,
    dataType: "html",
    success: function(html){
      alert(html);
    }
  });
});

What is the return value you expect? JSON, text, XML, etc...? I guess it has something to do with your PHP script so it would be helpful if you post it. — Felix Kling, Apr 06 '10 at 15:52
I know this is two years after that fact, but I'm running into this same issue. I need persistent objects, and so I figured an ajax call to the same page would suffice. Sadly no, I'm getting the whole page as the response. — Dale, Jul 25 '12 at 04:59

score 41 · Accepted Answer · answered Apr 06 '10 at 15:53

41

That's how it works. You're requesting index.php via AJAX, so you'll get whatever the contents of index.php are.

If you want a particular value, make a new PHP page that outputs just that value, and request that URL's contents instead.

answered Apr 06 '10 at 15:53

ceejayoz

176,543
40
303
368

Thanks! I changed the request to "ajax.php" page and it works fine! – Sophia Gavish Apr 06 '10 at 15:59
Wow, thank you so much. This is really informative. I have been facing this problem on a number of different projects without know where I was going wrong. Really helpful! – Pamela Sillah Mar 27 '18 at 12:37

score 14 · Answer 2 · answered Apr 06 '10 at 16:01

14

So when you have this on your index.php at the beginning?:

<?php 
   if (isset($_POST["testAjax"])) { 
       echo $_POST["testAjax"]; 
   } 
?>

If this script is outputting further text then of course this will also be recieved by the Ajax call. You can put exit() after the echo to prevent the script from being processed further:

if (isset($_POST["testAjax"])) { 
    echo $_POST["testAjax"];
    exit();
}

Also use dataType: 'text' as the value you return is obviously not HTML.

Or as others suggest, create a new page that is responsible for dealing with the Ajax request. If you are doing more than just outputting the received value (i.e. more complex operations) you should do this anyway.

answered Apr 06 '10 at 16:01

Felix Kling

795,719
175
1,089
1,143

@Felix, I am running into this similar problem. Can you elaborate more on your answer? I am taking input from html form and passing it to php/mysql query. So, I had included everything in one file. Is there a better way to handle this ? any links to an example will help. Thank you – user5249203 Dec 12 '16 at 21:20
Man you are a savour. I wish I can + more than 1 – Saad Suri Feb 28 '17 at 09:42

score 7 · Answer 3 · answered Apr 06 '10 at 16:00

Sophia, In your case, you should not send your data to a php file that, if viewed by a web browser, displays a website page. You should send your information to a php file that only returns the data that you would like to see returned.

So instead of "index.php", create a file called something like "my-ajax-script.php". That file should include any necessary "include()" files to connect to the database and your php function files (ie: for sanitizing the POST data). Then the file should have the code that processes the POST data, and echo's out the data complete with some html tags. This data will be inserted into your existing DOM (html markup).

score 2 · Answer 4 · answered Sep 23 '20 at 13:14

I've just been making the move from pure JavaScript to jQuery because of, well, peer pressure, and finding it frustrating. In particular, getting whole pages of PHP back from an Ajax POST request. I have read and re-read this page several times in the past two days when this kept happening. In the end, the problem in both cases that I'd either spelled the php url wrong in the Ajax setup or put the wrong path to the file.

Sometimes it's the easiest little things that trip you up!

I hope that this will save somebody out there some time...

Sophie cai · Answer 5 · 2020-08-24T07:58:00.520

1

Updated 2020: If you are using MVC framework, then the url SHOULD NOT be 'index.php',instead using full directory:

 url: "http://localhost/mvc/controller/function/param1/param2",

Old answer 2019:

In my case, anyone who has the same issue try using

require_once instead of require in your bootstrap php file to prevent a whole page re-render a second time through out the system.

edited Aug 24 '20 at 07:58

answered Feb 26 '20 at 23:52

Sophie cai

195
4
13

score 1 · Answer 6 · answered Oct 30 '20 at 20:28

1

Use condition to verify if $_POST empty in you main page or index.php to not send the whole page in response ajax

<?php 
if(empty($_POST)){ ?>

//
<html>
the header pages
the body
the include pages
the scripts pages
the footer
<?php } ?>

answered Oct 30 '20 at 20:28

Mohamed Sami Khiari

17
5

jQuery Ajax returns the whole page

6 Answers6

Linked

Related