How to run simple php code with jquery/ajax?

Question

Because my actual example is way too big I made a very short example:

test1.php

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!--jQuery-->
<body>
<p> What is the first letter of the alphabet?</p>
<button type="button" id="button">Tell me!</button>
<div id="div"></div>
<script>
$(document).ready(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'test2.php',
            success: function() {
                $('#div').html();
            }
        });
    });
});
</script>
</body>
</html>

test2.php

<?php
echo "It's the letter A!";
?>

I want to this to print out "It's the letter A!" when I hit the button, which does not seem to work. Could somebody help end tell me why this doesn't work and how to fix it?
Thanks

Because you did nothing with the response..... have a look at the documentation for $.ajax — Patrick Evans
– Patrick Evans, Commented Aug 22, 2017 at 9:08

JYoThI · Accepted Answer · 2017-08-22 09:11:39Z

1

1st : Should be enclosed by quotes $('#button')

2nd : Get the response in success function like this.

success: function(res) {

            $('#div').html(res);

          }

3rd : Set data type to text .

 dataType:'text'

Update 1:

$(document).ready(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'test2.php',
            dataType:'text',
            success: function(res) { 

                $('#div').html(res);

            }
        });
    });
});

answered Aug 22, 2017 at 9:11

JYoThI

12.1k1 gold badge13 silver badges26 bronze badges

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

Comments

B. Desai · Accepted Answer · 2017-08-22 09:10:43Z

1

Its because you haven't output the result you got from ajax.

<script>
$(document).ready(function(){
    $("#button").click(function(){
        $.ajax({
            url: 'test2.php',
            success: function(data) { //<---result from ajax
                $('#div').html(data); //<----add result to div element
            }
        });
    });
});
</script>

answered Aug 22, 2017 at 9:10

B. Desai

16.4k5 gold badges28 silver badges48 bronze badges

Comments

Meloman · Accepted Answer · 2017-08-22 09:14:33Z

0

If your script is only a call of a page without GET/POST arguments, the simpliest way with jQuery is $.load() :

<script>
    $(document).ready(function() {
        $('#button').click(function() {
            $.load("test2.php #div");
        });
    });
</script>

doc here : http://api.jquery.com/load/

answered Aug 22, 2017 at 9:14

Meloman

3,7743 gold badges43 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to run simple php code with jquery/ajax?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related