Using Get HTTP Request using Jquery and Ajax

Question

I have the below code and am trying to pass through data with a GET HTTP Request using Jquery and Ajax. When typing in "Example" in the text box and clicking "Go", I would expect "example" to come back in the feedback div. Nothing is being returned though. I would appreciate any help on why this would not be working. Thanks.

File name is "trial.php"

<body>
<script type="text/javascript" src="jquerycode.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<input id = "string" type = "text" /> 
<input id = "button" type = "button" value = "Go" />
<div id = "feedback"></div>
</body>

File name is "ajax.js"

$('#button').click(function()
{
var string = $('#string').val();

$.get('file.php', { input: string }, function(data) {  
$('#feedback').text(data);
});
});

File name is "file.php"

<?php
if(isset($_GET['input']))
{
$string = $_GET['input'];
echo strtolower($string);
}
?>

Maybe, you could print the data on the php side to see what is going on. And please avoid calling your variable string, that can cause so many crazy errors. — lc2817
– lc2817, Commented Nov 21, 2011 at 5:48
what do you get if you do print_r($string), also check what do you get inside the success callback of the GET request by doing console.log(data) or alert(data); — Rafay
– Rafay, Commented Nov 21, 2011 at 5:50

Kevin Ji · Accepted Answer · 2011-11-21 05:45:33Z

1

Wrap the ajax.js with a document.ready event:

$(document).ready(function () {
    $('#button').click(function () {
        var string = $('#string').val();

        $.get('file.php', { input: string }, function (data) {  
            $('#feedback').text(data);
        });
    });
});

answered Nov 21, 2011 at 5:45

Kevin Ji

10.5k4 gold badges43 silver badges65 bronze badges

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

Comments

Vikram Srivastava · Accepted Answer · 2011-11-21 06:03:30Z

1

If you were not included any jquery file then please use any of jquery.min.js file at the top scipt function within <head> tage like:

<script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>

And then modify your javascript function as given:

$(document).ready(function(){
$('#button').click(function(){
  var string = $('#string').val();

  $.get('file.php', { input: string }, function(data) {  
     $('#feedback').text(data);
   });
  });
});

answered Nov 21, 2011 at 6:03

Vikram Srivastava

376 bronze badges

Comments

Akhil Thayyil · Accepted Answer · 2011-11-21 05:47:19Z

0

    /*Try this*/
    $(document).ready(function(){
    $('#button').click(function()
    {

    var dataToSend={ input:$('#string').val() };

    $.ajax(url:'file.php', data:dataToSend,dataType:'html',type:'GET',success:function(data) {  
    $('#feedback').text(data);
    });
    });
});

answered Nov 21, 2011 at 5:47

Akhil Thayyil

9,4256 gold badges38 silver badges48 bronze badges

Collectives™ on Stack Overflow

Using Get HTTP Request using Jquery and 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