Question

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

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

我正在成功发布我的网络服务。

请帮我解决这个编码问题。我随附了这封邮件，附上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>

Answer 1

试试这个

$.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(){}
      });

Answer 2

如果您可以发布错误/问题，那么人们会更容易提供帮助。期望以您的名义运行代码将导致很少有兴趣提供帮助的人。

要点：您确定，代码“ POST”中使用的HTTP方法是否正确。从网络服务的作用来看，它只是从数据库中获取数据。因此，用于这种Web服务的常用HTTP动词（因为它只读取数据而不进行修改）是GET。在这种情况下，您也应该在$ .ajax中使用GET。.

尝试

$.ajax({
                type: "GET",
                url: "http://localhost:1806/HTMLWebService.asmx/Getjsonitems",
                async: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: SucceedFunc,
                data: "{}", // You don't necessarily have to put this.
                failure: FailedFunc
            });

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

2 个答案: