调用JSON webservice&使用HTML

时间:2012-11-24 06:00:33

标签: json web-services

我最近一直在使用XML,但现在我正在练习一些JSON。

我要做的是制作一个按钮和文本框 - 这样用户就可以输入一个邮政编码,它将获得该邮政编码的信息......

使用geonames.org中的JSON

我试图解决这个问题令人沮丧,我发现使用XML创建自己的文件时很容易,但现在我正在尝试使用实际的网站和JSON。

请告诉我该怎么做!会很感激的!感谢。

2 个答案:

答案 0 :(得分:0)

首先,HTML无法处理来自服务器的json响应。您可以将json格式的get或post发送到服务器并获取json响应,但是您需要除HTML之外的其他内容来处理该JSON消息。浏览器可以格式化和显示XML而不是JSON(它们只是将其显示为字符串)。在浏览器中执行此操作的最简单方法是使用JavaScript。为此,我建议使用jquery库。

http://jquery.com

这是我最近用来处理返回的JSON字符串的一些jquery的例子。

$(document).ready(function() {

    $(".img a").on("click", function(event) {
        event.preventDefault();
        var item;
        if ((item= $(this).attr( 'href' ))=="saved") return false;
        $(this).html("<div style='line-height:4em '>Saved</div>");
        $(this).attr("href","saved");
        var action ="add";

        jqxhr = $.post("webservice.php", { action: action, color: item }, function(data) {
            var result=data.result;
            if (result=="saved") {
                self.html("<div>Saved</div>");
                self.attr("href","saved");
            }           
        }, "json")
        .error(function() {         
            alert("error: unable to contact web service"); 
        });
    });
}); 

此请求返回的JSON字符串为{result:saved}。因此,您可以看到作为数据对象的一部分访问关联的数组。在我的例子中,data.result为我提供了json字符串的结果值。

注意我的示例是使用锚标记传递值以在webservice调用中发送。在您的情况下,您将需要使用表格。

答案 1 :(得分:0)

如果您正在使用jeoquery,请查看UI sample的html来源。它显示了相同的自动完成框,您可能尝试实现没有自定义代码来写入解析返回的JSON。下面的代码应该适合你:

<input class="input-large" id="city" type="text"/>

$("#city").jeoCityAutoComplete();