jQuery ajax querying a PHP script

Question

<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...

Is the call to a same-origin script, i.e is the script being ran on the same server as the one that creates the page which calls $.ajax? — CBusBus
– CBusBus, Commented Jan 30, 2012 at 18:43
did you verify (in firebug, fiddler, ...) if the php script returns valid/any data? — roberkules
– roberkules, Commented Jan 31, 2012 at 3:03

Sudesh · Accepted Answer · 2012-01-30 18:34:10Z

1

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)); 
            }  
    }); 
}

answered Jan 30, 2012 at 18:34

Sudesh

1,1693 gold badges14 silver badges29 bronze badges

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

1 Comment

lollercoaster Over a year ago

when I use success I get nothing (the alert doesn't come up) as opposed to the wrong alert..

buley · Accepted Answer · 2012-01-30 18:24:52Z

0

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.

answered Jan 30, 2012 at 18:24

buley

29.6k18 gold badges90 silver badges108 bronze badges

2 Comments

buley Over a year ago

Are you trying to do this across domains? domain, protocol (http/s) and port all need to match in most cases to comply with the same-origin policy. What is the status code of the response?

lollercoaster Over a year ago

nope, my domain. also when using the syntax url: ../xxx/autocomplete.php, the same behavior occurs. status (as you can see above) is 0. don't know how to see the HTTP status. using console.log(data) shows ` Resource interpreted as Other but transferred with MIME type undefined.` so I don't know what is going on...

CBusBus · Accepted Answer · 2012-01-30 18:25:24Z

0

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.

answered Jan 30, 2012 at 18:25

CBusBus

2,3672 gold badges18 silver badges28 bronze badges

3 Comments

CBusBus Over a year ago

That is the only prevalent error in your code. What is the output when of complete if you use console.log(), string, object etc?

lollercoaster Over a year ago

using console.log(data) shows Resource interpreted as Other but transferred with MIME type undefined. so I don't know what is going on...

CBusBus Over a year ago

It sounds like you're output isn't being recognised as json. Try putting the above php headers into your file, if they don't force it to be interpreted as json try prepending something like "data = " to your json_encode() call. Final, possibly insulting, question: are you remembering to "echo json_encode();" and not just calling the encode function?

roberkules · Accepted Answer · 2012-01-30 18:33:21Z

0

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

answered Jan 30, 2012 at 18:33

roberkules

6,6052 gold badges46 silver badges52 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-01-30 18:33:44Z

0

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/

answered Jan 30, 2012 at 18:33

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

lollercoaster Over a year ago

nope it's my domain. also when using the syntax url: '../xxx/autocomplete.php', the same behavior occurs

Collectives™ on Stack Overflow

jQuery ajax querying a PHP script

5 Answers 5

1 Comment

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related