如何为HTML5应用程序调用json数据Web服务?

问题描述 投票:1回答:1

我需要HTML5的代码帮助。我有web服务运行数据库并返回JSON数据。但是,当谈到HTML5客户端部分时,如何使用它以及如何显示对我来说是一个问题。

WebMethod是'GetItemData',返回类型是JSON数据的String。数据库表包括:ItemID,ItemName,ItemPrice和ItemOnHand列。

我正在成功发布我的Web服务。

请帮我解决这个编码问题。我随附了这封邮件,附上HTML5客户端代码。从here下载脚本和样式。 JqxGrid是DataGrid控件,它显示从JSON到Grid的整个数据。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <link href="Styles/jqx.base.css" rel="stylesheet" type="text/css"/>
    <link href="Styles/jqx.classic.css" rel="stylesheet" type="text/css"/>
    <script src="Scripts/jqxcore.js" type="text/javascript"></script>
    <script src="Scripts/jqxbuttons.js" type="text/javascript"></script>
    <script src="Scripts/jqxdata.js" type="text/javascript"></script>
    <script src="Scripts/jqxgrid.js" type="text/javascript"></script>
    <script src="Scripts/jqxgrid.selection.js" type="text/javascript"></script>
    <script src="Scripts/jqxmenu.js" type="text/javascript"></script>
    <script src="Scripts/jqxscrollbar.js" type="text/javascript"></script>

<script type="text/javascript">
    function GetItemsData() {
        try {
            url = "http://localhost:1806/HTMLWebService.asmx/Getjsonitems",
            source = {
                datatype: "json",
                datafields: [
               { name: 'ItemID' },
               { name: 'ItemName' },
               { name: 'ItemPrice'}, 
               { name: 'ItemOnHand'}] 
               };

            $.ajax({
                type: "POST",
                dataType: "json",
                async: false,
                url: "http://localhost:1806/HTMLWebService.asmx/Getjsonitems",
                cache: false,
                contentType: "application/json; charset=utf-8",
                success: SucceedFunc,
                data: "{}",
                failure: FailedFunc
            });
        }
        catch (e) {
            alert('failed to call web service. Error: ' + e);
        }
    }

    function SucceedFunc(data, status) {
        debugger;
        alert("Enter into Success");
        source.localdata = data.d;
        alert(source.localdata = data.d);

        //Preparing the data for use
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxgrid").jqxGrid({
            source: dataAdapter,
            theme: 'classic',
            columns: [
           { text: 'Item ID', dataField: 'ItemID', width: 250 },
           { text: 'Item Name', dataField: 'ItemName', width: 150 },
           { text: 'Item Price', dataField: 'ItemPrice', width: 180 },
           { text: 'Items On Hand', dataField: 'ItemOnHand', width: 180 }
           ]
        });
    }

    function FailedFunc(request, status, error) {
        debugger;
        alert("Error occured");
    }
</script>
</head>

<body onload="GetItemsData()">
<div id="jqxgrid"></div>
</body>
</html>
jquery ajax json html5 jqxgrid
1个回答
0
投票

试试这个

$.ajax({
        cache: false,
        type: "GET",
        async: false,
        data: {},
        url: "1231212312312312.svc/webBinding/Result?metaTag=" + meta,
        contentType: "application/json; charset=utf-8",
        crossDomain: true,
        success: function(){},
        error: function(){}
      }); 
© www.soinside.com 2019 - 2024. All rights reserved.