CODEWITHSUNDEEP
phpjqueryhtmlajaxjson
ZAX
ZAX

Reputation: 1008

Not Getting Expected Response When Using Ajax With JSONP

I am experimenting with jsonp.

Currently I have an html page with ajax on it listed below, which contains a drop box form, along with a table. Only the headers are there initially and it depends on ajax getting a jsonp response in order to populate the other cells.

I then have my response php also hosted, and I thought everything was correct, but obviously not.

All my id's appear to be correct unless I"ve overlooked one, so I really do not understand why all I"m getting is the error response from the jsonp page.

html page: 

<html>
<head>
        <title>Car Queries</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function()
        {
                $("#submitbutton").click(function()
                {
                        $.ajax(
                        {
                                url: "https://example.com/jsonServer.php",
                                type: "GET",
                                dataType: "jsonp",
                                jsonp: "callback",
                                data: { car: $("#carselection").val()},
                                success: function(data)
                                {
                                        if(data.name == "error")
                                        {
                                                $("#outputcarname").text("There is no such car available"),
                                                $("#price").text(" "),
                                                $("#mpg").text(" ");
                                        }
                                        else
                                        {
                                                $("#outputcarname").text("data.name"),
                                                $("#price").text("data.price"),
                                                $("#mpg").text("data.mpg ");
                                        }
                                },
                                error: function()
                                {
                                        $("#outputcarname").text("There is a problem with the server"),
                                        $("#price").text(" "),
                                        $("#mpg").text(" ");
                                }
                        });
                return false;
                });
        });
        </script>
</head>
<body>

        <h1>Cars Cars Cars!</h1>
        <form action="" method="POST">

        <select id="carselection">
                <option selected="selected">Pick a Car</option>
                <option value="Maxima">Maxima</option>
                <option value="Element">Element</option>
                <option value="Prius">Prius</option>
        </select>
        </br></br>
        <input type="submit" id="submitbutton" value="Submit">
        </form>
        </br>
        <center><table>
                <tr>
                        <th>Car Name</th>
                        <th>Price</th>
                        <th>MPG</th>
                </tr>
                <tr>
                        <td id="outputcarname"></td>
                        <td id="price"></td>
                        <td id="mpg"></td>
                </tr>
        </table></center>
</body>
</html>

Response JSONP/PHP:

<?php

$cars = array('Maxima' => array('price' => '$32,780', 'mpg' => '24'),
              'Prius' => array('price' => '$25,565', 'mpg' => '49'),
              'Element' => array('price' => '$22,075', 'mpg' => '22'));

if(array_key_exists($_GET['carselection'], $cars))
{
        $carname = $_GET['carselection'];
        $results = array('name' => $carname, 'price' => $cars[$carname]['price'], 'mpg' => $cars[$carname]['mpg']);
}
else
{
        $results = array('name' => 'error');
}

$callback = htmlentities($_GET['callback'], ENT_QUOTES);
print $callback . '(' . json_encode($results) . ')';
?>

Upvotes: 0

Views: 186

Answers (1)

Sean
Sean

Reputation: 12433

Change 

data: { car: $("#carselection").val()},

To 

data: { carselection: $("#carselection").val()},

You also need to remove the "" from data.name, data.price, and data.mpg.

else
   {
    $("#outputcarname").text(data.name),
    $("#price").text(data.price),
    $("#mpg").text(data.mpg);

Upvotes: 1

Related Questions