我需要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>
试试这个
$.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(){}
});