使用Javascript/JQuery检索JSON获取数据

我试图做的是从在线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>

邮政编码的第一位数字：
函数结果（）{
$.ajax({
网址：'http://www.foobar.com/cp/index.php?area=AB12',
数据类型：“jsonp”，
jsonp:'jsoncallback'，
超时：5000，
成功：功能（数据、状态）{
$。每个（数据、功能（i、项）{
变量位置=“”+项目位置+“”
+“”+item.id+”
”；
输出。追加（位置）；
});
},
错误：函数（）{
text（'加载数据时出错'）；
}
});
};
靠近你所在地的地方

---

获取数据的页面带有搜索变量“area”

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

见：

它返回：

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

致：

看看这是否有效

更新2： 回答另一个评论。您是否确实初始化了

输出

变量？例如，在开始时使用类似的内容：

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

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

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

但是，再加上：

return false;

到

结果

函数的末尾，以防止重新加载页面

请参阅此演示：-它似乎有效

另一个问题：

---

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

您错误地实现了JSONP。您需要生成一个函数调用，即响应应该是

foo（）非
foo

解决以下问题很简单：

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

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

<form id="myForm">



及

$（函数（）{
$（'#myForm'）。提交（函数（事件）{
event.preventDefault（）；//您到底遇到了什么问题？您得到了什么结果？您希望得到什么？FWIW，API似乎不正确地支持JSONP。追加
jsoncallback=foo
返回
foo[{…
这显然是错误的。你应该通知他们或者看看他们的API文档如何进行正确的JSONP调用。好的，一旦“提交”按下时，页面刷新为
？area=AB12&search=search
，其他内容不做任何更改。我希望页面显示所有行的数据，但页面上没有任何可见的更改。我自己编写API只是为了实现这个简单的函数，如果这就是我将使用它的全部目的，这是一个问题吗？然后您在正确。您需要生成一个函数调用，即响应应该是
foo（）；
而不是
foo
。修复它应该很简单，然后其他一切都可以正常工作。这怎么做呢？web服务上的代码是：
while（$row=mysql\u fetch\u assoc（$result））{$records[]=$row；}echo$\u GET['jsoncallback'].json_encode（$records）；
-这里有什么可以更改的吗？但是没有任何更改-我的HTML页面上仍然没有显示任何内容。是的，这就是我所做的，字符对字符（）。但是，我的客户端代码仍然没有显示任何内容。非常感谢您的帮助。我正在尝试使其正常工作，但是在显示
$（“#search”）的行中是否存在语法错误。提交（事件）{
？@Ben:修复并添加了一个演示：。如果您对jQuery不太熟悉，我真的建议您先阅读教程：。再次感谢您如此耐心。我已经更新了代码，但页面仍然没有任何更新。可能是因为您没有定义
输出
。请查看我的演示，尝试理解它。它工作，所以它包含所有你需要知道的。
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

<form id="myForm">

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