0

我正在尝试使用 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) . ')';
?>
4

1 回答 1

1

改变

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

到

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

您还需要删除""from data.name、data.price和data.mpg。

else
   {
    $("#outputcarname").text(data.name),
    $("#price").text(data.price),
    $("#mpg").text(data.mpg);
于 2012-11-08T00:27:35.990 回答