CODEWITHSUNDEEP
phpjavascriptjquery
lollercoaster
lollercoaster

Reputation: 16503

jQuery ajax querying a PHP script

<html>
<head>

<title>Testing AJAX</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
    function init() {
        $("#form1").submit(submitForm);
    }

    function submitForm() {
        var paramValue = $("#param_input").val();

        $.ajax({  
                type: "GET", 
                url: 'http//xxx.edu/xxx/autocomplete.php', 
                data: {
                    query: paramValue
                },  
                dataType: "json",
                complete: function(data){  
                    alert(JSON.stringify(data)); 
                }  
        }); 
    }

    // On page load
    $(document).ready(init);

</script>
</head>

<body>

<form id="form1" name="form1_name" action="" >
<label for="find">Value</label>
<input type="text" name="param" id="param_input" />
<input type="submit" name="button" id="button" value="Find">  
</form>

</body>

</html>

I really want to be able to query my PHP script (which returns a JSON via json_encode()) and use that JSON information.

Right now the alert box says this:

{"readyState":0,"responseText":"","status":0,"statusText":"error"}

So I'm doing something wrong. Any ideas? I'm all new to AJAX / jQuery.

EDIT: added dataType: "json" but that did not help - still returning wrong JSON stuff...

Upvotes: 0

Views: 471

Answers (5)

Sudesh
Sudesh

Reputation: 1169

Use success in place of complete, as in success callback you will get your data. In complete you will get XHR object

Refer below script

function submitForm() {
    var paramValue = $("#param_input").val();

    $.ajax({  
            type: "GET", 
            url: 'http//xxx.edu/xxx/autocomplete.php', 
            data: {
                query: paramValue
            },  
            dataType: "json",
            success: function(data){  
                alert(JSON.stringify(data)); 
            }  
    }); 
}

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

Looks like a cross domain call which will fail unless you use Jsonp or some hacks. You should look for hacks for cross domain call to work something like YQL

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/

Upvotes: 0

roberkules
roberkules

Reputation: 6605

If you intend to also send JSON data, then you have to stringify already the data sent to the server.

$.ajax({  
    type: "GET", 
    url: 'http//xxx.edu/xxx/autocomplete.php', 
    data: JSON.stringify({
        query: paramValue
    }),  
    dataType: "json",
    complete: function(data){  
        alert(JSON.stringify(data)); 
    }  
});

you should add this javascript file to make sure the JSON parser exists: https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Upvotes: 0

CBusBus
CBusBus

Reputation: 2359

You're nearly there just add dataType to your $.ajax call.

function submitForm() {
    var paramValue = $("#param_input").val();

    $.ajax({  
            type: "GET", 
            url: 'http//xxx.edu/xxx/autocomplete.php', 
            data: {
                query: paramValue
            },  
            dataType: "json",
            complete: function(data){  
                alert(JSON.stringify(data)); 
            }  
    }); 
}

Alternatively you can declare the return content to be json by declaring it within the http response header.

header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');

You would use the above if you were restricted to vanilla JS, it is possibly good practice to use it anyway.

Upvotes: 0

buley
buley

Reputation: 29208

Try passing a dataType param to jQuery's ajax.

For example:

    $.ajax({  
            type: "GET", 
            url: 'http//xxx.edu/xxx/autocomplete.php', 
            data: {
                query: paramValue
            },  
            dataType: 'json',
            complete: function(data){  
                console.log( data ); 
            }  
    });

One of the benefits of jQuery's ajax interface is that you won't have to JSON.parse (or worse, eval) if you use the correct dataType flag.

Upvotes: 0

Related Questions