使用 Javascript/JQuery 检索 JSON GET 数据

Question

我要做的是从在线 Web 服务中检索 JSON 数据，该服务在 MySQL 数据库中搜索并找到某个字符串，并使用 Javascript 在 HTML 页面上显示它。

我正在努力解决的是实际显示结果数据。

我的 HTML 页面的相关区域如下所示：

<form onSubmit="results()">
    <fieldset>
        <label for="area">First digits of postal code:</label>
        <input name="area" type="text" maxlength="4" placeholder="AB12" required />
        <input type="submit" value="Search" name="search" />
    </fieldset>
</form>



<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">

function results(){
    $.ajax({
        url: 'http://www.foobar.com/cp/index.php?area=AB12',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<h1>'+item.location+'</h1>'
                + '<p>'+item.id+'</br>';

                output.append(place);
            });
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
};
</script>

<div id="place">
<h3>Places near your location</h3>
</div>

GET 数据的页面是http://www.foobar.com/cp/index.php，搜索变量为“area”。 Test sample is ?area=AB12.

Answer 1

该服务似乎没有正确地将 JSON 对象包装在括号中，因此它不能用作 JSONP。

见：http://www.entertainmentcocktail.com/cp/index.php?area=AB12&jsoncallback=TEST

返回：

TEST[{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]

虽然它应该返回：

TEST([{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]);

您将无法使用它，因为它不是有效的 JSONP。

更新：

从评论中回答更多信息 - 如果您控制服务器端脚本，请尝试更改：

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . json_encode($records);

到：

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

看看是否可行。

更新 2：

回答另一条评论。你真的初始化了output 变量吗？例如开头是这样的：

var output = $('#place').append('<div/>');

你真的调用了results 函数吗？它必须被调用：

results();

或在某处注册为事件处理程序，使用 jQuery 方式：

$('form').submit(results);

然后添加：

return false;

到results函数的末尾，防止页面被重新加载。

查看此演示：http://jsbin.com/uziyek/1/edit - 它似乎有效。

另一个问题：

您的代码似乎还有另一个问题，即 area=AB12 参数被硬编码到您的 URL 中。相反，您应该做的是从表单中获取值并将其发送。

Answer 2

您错误地实现了 JSONP。您需要生成一个函数调用，即响应应该是foo(<json here>); 而不是foo<json here>。

修复起来很简单：

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

另一个问题是您没有阻止表单提交，即当您提交表单时，页面会刷新。你必须防止这种情况。最好用 jQuery 绑定事件处理程序，不要使用内联事件处理程序：

<form id="myForm">

和

$(function() {
    $('#myForm').submit(function(event) {
        event.preventDefault(); // <-- prevent form submission
        // Ajax call here
    });
});

DEMO