以JSON格式从WCF服务获取数据并绑定到html页面 [英] Get data from WCF Service in JSON format and bind to html page

问题描述

我有一个带有3个参数的方法，它以JSON格式返回数据。 
 
 ------------------------------------------ ----------------------------------------- 
 
 [ OperationContract] 
 [WebGet（RequestFormat = WebMessageFormat.Json，
 ResponseFormat = WebMessageFormat.Json，
 UriTemplate =/ Get_myHours /）] 
 public string Get_myHours（int loginID，DateTime frmDate，DateTime toDate）
 {
 using（MyEntities OE = new MyEntities（））
 {
 var jsonSerialiser = new JavaScriptSerializer（）; 
 var json = jsonSerialiser.Serialize（OE.GET_HRbyIDdate（loginID，frmDate，toDate）.ToList< GET_HRbyIDdate_Result>（））; 
返回json; 
} 
} 
 
 -------------------------------- ------------------------------------------------ 
 
i我从同一个项目中的html页面调用此方法'Get_myHours'。 
它不工作请帮忙！ 
 
 ------------------------------------------ ------------------------------------- 
< script> 
 function show（）{
 $ .ajax（{
 type：GET，
 url：Service1.svc / Get_myHours，
 contentType：application / json; charset = utf-8，
 dataType：json，
 success：function（data）{
 var result = data.Get_myHours（loginIDtxt，frmDatetxt，toDatetxt）; 
 var Days = result.Days; 
 var FinalTime = result.FinalTime; 
 $（'＃jsonData'）。html（''）; 
 $（'＃jsonData'） .append（'< table>< t>< tr>< th>'+ 
'Days< / th>< th> FinalTime< / th>'+ 
'< / tr>< tr>< td>'+ Days +'< / td>< td>'+ FinalTime + 
'< / td>< / tr>< / tbody>< ; / table>'）; 
}，
错误：function（msg）{
警告（错误）
} 
}）; 
} 
< / script> 
 
 
< div> 
< input id =loginIDtxttype =text/> ;; 
< input id =frmDatetxttype =text/> ;; 
< input id =toDatetxttype =text/> t; 
< button onclick =show（）>输入< / button> ;; 
< / div> 
< div id =jsonData> 
 
< / div> 
 
 ------------------------------------------ ------------------------------------------- 

解决方案

.ajax（{
type：GET，
url：Service1.svc / Get_myHours，
contentType ：application / json; charset = utf-8，
dataType：json，
success：function（data）{
var result = data.Get_myHours（loginIDtxt，frmDatetxt，toDatetxt ）;
var Days = result.Days;
var FinalTime = result.FinalTime;

（'＃jsonData'）。html（''）;

（'＃jsonData'）。append（'< table>< tbody>< tr>< th>'+
'Days< / th>< th> ; FinalTime< / th>'+
'< / tr>< tr>< td>'+ Days +'< / td>< td>'+ FinalTime +
'< ; / TD>< / TR>< / tbody的>< / table>'）;
}，
error：function（msg）{
alert（error）
}
}）;
}
< / script>


< div>
< input id =loginIDtxttype =text/> ;;
< input id =frmDatetxttype =text/> ;;
< input id =toDatetxttype =text/> t;
< button onclick =show（）>输入< / button> ;;
< / div>
< div id =jsonData>

< / div>

------------------------------------------ -------------------------------------------

I have a method with 3 parameters which returns the data in JSON format.

-----------------------------------------------------------------------------------

[OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Json,
            ResponseFormat = WebMessageFormat.Json,
            UriTemplate = "/Get_myHours/")] 
        public string Get_myHours(int loginID, DateTime frmDate, DateTime toDate)
        {
            using (MyEntities OE = new MyEntities())
            {
                var jsonSerialiser = new JavaScriptSerializer();
                var json = jsonSerialiser.Serialize(OE.GET_HRbyIDdate(loginID, frmDate, toDate).ToList<GET_HRbyIDdate_Result>());
                return json;
            }           
        }

--------------------------------------------------------------------------------

i am calling this method 'Get_myHours' from html page which is in the same project.
its not working please help !!!

-------------------------------------------------------------------------------
    <script>
        function show() {            
        $.ajax({
            type: "GET",
            url: "Service1.svc/Get_myHours",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var result = data.Get_myHours(loginIDtxt, frmDatetxt, toDatetxt);
                var Days = result.Days;
                var FinalTime = result.FinalTime;                
                $('#jsonData').html('');
                $('#jsonData').append('<table><tbody><tr><th>' + 
                  'Days</th><th>FinalTime</th>' + 
                  '</tr><tr><td>' + Days + '</td><td>' + FinalTime +
                '</td></tr></tbody></table>');
            },
            error: function (msg) {
                alert("error")
            }
        });
    }
    </script>

   
 <div>
       <input id="loginIDtxt" type="text" />;
        <input id="frmDatetxt" type="text" />;
        <input id="toDatetxt" type="text" />t;
        <button onclick="show()">Enter</button>;        
   </div>
<div id="jsonData">

    </div>

-------------------------------------------------------------------------------------

解决方案

.ajax({ type: "GET", url: "Service1.svc/Get_myHours", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var result = data.Get_myHours(loginIDtxt, frmDatetxt, toDatetxt); var Days = result.Days; var FinalTime = result.FinalTime;

('#jsonData').html('');

('#jsonData').append('<table><tbody><tr><th>' + 'Days</th><th>FinalTime</th>' + '</tr><tr><td>' + Days + '</td><td>' + FinalTime + '</td></tr></tbody></table>'); }, error: function (msg) { alert("error") } }); } </script> <div> <input id="loginIDtxt" type="text" />; <input id="frmDatetxt" type="text" />; <input id="toDatetxt" type="text" />t; <button onclick="show()">Enter</button>; </div> <div id="jsonData"> </div> -------------------------------------------------------------------------------------

这篇关于以JSON格式从WCF服务获取数据并绑定到html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！