Question

我正在尝试使用jsonp。

目前我在下面列出了一个带有ajax的html页面，其中包含一个下拉框表单和一个表格。最初只有标题，它依赖于ajax获取jsonp响应以填充其他单元格。

然后我的回复php也被托管，我认为一切都是正确的，但显然不是。

我的所有id似乎都是正确的，除非我忽略了一个，所以我真的不明白为什么我得到的是jsonp页面的错误响应。

html页面：

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

响应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) . ')';
?>

Answer 1

更改

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

到

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

您还需要从""，data.name和data.price中删除data.mpg。

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

使用Ajax和JSONP时没有获得预期的响应

1 个答案: