Kris.Mitchell
Kris.Mitchell

Reputation: 998

Get php results with jquery ajax

I don't know why I am having a hard time with this, but it's about time I came up for air and asked the question.

What is the best way to call a php file with jquery ajax, have it process some inputs via $_GET, return those results and again use ajax to replace the content of a div?

So far, I can call the php file, and in the success of the jquery ajax call I get an alert of the text.

$.ajax({
        url: "xxx/xxx.php", 
        type: "GET",
        data: data,     
        cache: false,
        success: function (html) {
            alert("HTLM = " + html);
            $('#product-list').html(html);
            }
 });

I set the php function to echo the result, the alert spits out the html from the php file. But I get a side effect. I get the code that the php generated echoed at the top of the page. So php is doing it's job (by echoing the content). Next jquery is doing it's job by replacing the div's content with the values from the php file.

How do I stop the php file from echoing the stuff at the top of the page?

Sample code being echoed from php and alerted in the success of jquery ajax

HTML =

<div class="quarter">
  <div class="thumb">
    <a href="productinfo.php?prod-code=Y-32Z&cat=bw&sub=">
      <img src="products/thumbs/no_thumb.gif" alt="No Image" border="0" />
    </a>
  </div>
  <div class="labels"><span class="new-label">New</span></div>
  <p><span class="prod-name">32OZ YARD</span></p>
  <p><span class="prod-code">Y-32Z</span></p>
</div>

Thanks!!!

-Kris

Upvotes: 0

Views: 7086

Answers (3)

Luke
Luke

Reputation: 3353

Are you including your php file that you use for your ajax call at the top of the page? If so you dont need to. That would cause the data to dump at the top.

Ask your question :)

EDIT TO ANSWER QUESTION

<div id="product-list">
<?php include 'products.php' ?>
</div>

Your ajax function will now overwrite the php content when it runs and outputs to #product-list

Upvotes: 4

Daniel
Daniel

Reputation: 660

Your question isn't exactly clear, but it sounds like you only want to use PART of the response data. If that's the case, then there's 2 ways to go about it:

First, you can check on the PHP side if it's being requested via AJAX. This is the solution I'd use, since it prevents useless data being transferred to the client:

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
...
if(!IS_AJAX) {
    // anything here will NOT be sent in response to ajax requests
}

Alternatively, you can mark the part of the response data you wish to use with an ID, then search the returned data for that id:

<h1>Don't care about this</h1>
<div id="use_this">This is the useful data.</div>

Then for your ajax response callback:

success = function(data) {
    data = $(data).find('#use_this');
    // do whatever
}

Upvotes: 0

Ast Derek
Ast Derek

Reputation: 2729

If you mean you want to avoid showing the header and body tags, just the contents, you need to detect when the request is AJAX at PHP side.

Some pseudo-code is:

IF (!IS_AJAX)
    HTML
    HEADER
    BODY
ENDIF

CONTENTS

IF (!IS_AJAX)
    /BODY
    /HTML
ENDIF

Search for HTTP_X_REQUESTED_WITH here at stackoverflow

Upvotes: 0

Related Questions