How to handle jQuery Ajax call on the same page?

Question

I am trying to make a get request using jQuery ajax, want to get the response on the same page. I tried this code...

   
    <p>This is a Ajax get request.</p>
    <button class='send'>click</button>
    <p id='pritam'></p>

    <?php
    if (isset($_GET['name'])) {
        echo $_GET['name'];
        exit;   
    }
    ?>

    <script>
    $(document).ready(function() {
        $(".send").click(function(){
            $.ajax({
                type: "GET",
                data: {name: 'praveen'},
                success: function(data) {
                    $("#pritam").html(data);
                }
            });
        });
    });
    </script>

But I am getting an error, It executes all page element again when I click on the button including button tag.

It would be very informative if you included the error in the question. — Carsten Løvbo Andersen, Jun 23 '20 at 12:12
@Mitya, I am making the get request on the same page, so I don't think, I have to specify URL. — Praveen Kumar, Jun 23 '20 at 12:15
Is this ALL the code on the page? Is there a `
` on the page? — RiggsFolly, Jun 23 '20 at 12:17
So you don’t _actually_ get an error message, but the behavior is not what you wanted? Those are two different things. _“It executes all page element again when I click on the button including button tag”_ - well yeah, of course it does … If you don’t want that, then _you_ need to wrap parts of the code in if/else constructs, that “execute” certain parts of it or not, based on whether the current request was an AJAX request, or a “normal” one. https://stackoverflow.com/questions/19794859/detect-ajax-in-php — CBroe, Jun 23 '20 at 12:18
@JovylleBermudez, Thanks, you solved my problem but can you explain why is It necessary. — Praveen Kumar, Jun 23 '20 at 12:19
Does this answer your question? [How to call the ajax page in same page?](https://stackoverflow.com/questions/20351075/how-to-call-the-ajax-page-in-same-page) — Always Helping, Jun 23 '20 at 12:20
@PraveenKumar because the HTML above it will be included as response to your ajax. that is why you should put it on the top. so you will have a clean response — Jovylle, Jun 23 '20 at 12:23
To keep your project clean you should not mix up php code and frontend code. You can add a url to the ajax config and call an additional php file which processes your request and returns a json object. After this you can handle the data on success or failure. Good example found here: https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — Chris P. Bacon, Jun 23 '20 at 12:34

score 1 · Answer 1 · answered Jun 23 '20 at 12:59

You can do it like this

  <?php
    if (isset($_GET['name'])) {
        echo $_GET['name'];
        exit;   
    }
 ?>

 <p>This is a Ajax get request.</p>
    <button class='send'>click</button>
    <p id='pritam'></p>

    

    <script>
    $(document).ready(function() {
        $(".send").click(function(){
            $.ajax({
                type: "GET",
                data: {name: 'praveen'},
                success: function(data) {
                    $("#pritam").html(data);
                }
            });
        });
    });
    </script>

lindowx · Answer 2 · 2020-06-23T17:40:18.867

0

You should put your PHP section on top of this php file.

EDIT:

That's because a PHP file executed from top to bottom. When the ajax request was processing, the contents above the PHP section will output first. That will cause the data response you got contains page html tags.

edited Jun 23 '20 at 17:40

answered Jun 23 '20 at 12:14

lindowx

34
5

2

I see you do not yet have **50 reps**, but this is really just a comment. This type of answer attracts downvotes or gets flagged ___I did not DV___ and if that happens you will loose rep points and take longer to get to the 50 reps you need to comment on any question. Until then, stick to questions that are well asked and therefore easily answered without needing clarification. http://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead – RiggsFolly Jun 23 '20 at 12:18
hi lindowx, you can explain this further, :) this answer actually helped – Jovylle Jun 23 '20 at 12:22

How to handle jQuery Ajax call on the same page?

2 Answers2