2

HTML5のコードヘルプが必要です。Webサービスでデータベースを実行し、JSONデータを返します。しかし、HTML5クライアントの部分に関しては、それをどのように使用し、どのように表示するかが私にとっての問題です。

WebMethodは'GetItemData'であり、戻り値のタイプはJSONデータの文字列です。データベーステーブルは、ItemID、ItemName、ItemPrice、およびItemOnHand列で構成されます。

Webサービスを正常に公開しています。

このコーディングの問題から私を助けてください。このメールにもHTML5クライアントコードを同封しています。ここからスクリプトとスタイルをダウンロードします。JqxGridは、JSONからグリッドまでのデータ全体を表示するDataGridコントロールです。

<!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>
4

2 に答える 2

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(){}
      });
于 2013-07-10T06:30:57.100 に答える