从 JQuery 调用 C# Web 服务答案

【问题标题】：Calling C# Web Service from JQuery从 JQuery 调用 C# Web 服务
【发布时间】：2014-05-16 15:31:52
【问题描述】：

我在 C# 中设置了一个 JSON Web 服务，我正在尝试创建一个自定义 HTML 页面来调用它。

http://localhost:25524/DBService.svc/json/db=TestDB/query=none

我在浏览器中输入它并尝试取回 JSON 格式的数据。数据是一个字典，有一个键和值，但它没有显示出来。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div>
            <p class="app-key">The ID is </p>
            <p class="app-value">The content is </p>
        </div>
    </body>
</html>

你好.Js

$(document).ready(function() {
    $.ajax({
        url: "http://localhost:25524/DBService.svc/json/db=TestDB/query=none"
    }).then(function(data) {
    alert(data);
       $('.app-key').append(data.JobId);
       $('.app-value').append(data.RunTime);
    });
});

服务接口：

[OperationContract]
    [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, 
        BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "json/db={inDatabase_}/query={inQuery_}")]
    DBResult GetData(string inDatabase_, string inQuery_);

返回的数据以这种格式返回

{
    "GetDataResult": {
        "DataSet": [],
        "DataSize": 0,
        "Fault": null,
        "JobId": "64ba7350-49e1-47f5-9d81-c623fdff141d",
        "RunTime": 34554
    }
}

【问题讨论】：

问题是什么？
@RoryMcCrossan 我需要知道如何使用它，这就是我尝试过的方式，但它不起作用
返回的 JSON 格式是什么？
@RoryMcCrossan {"GetDataResult":{"DataSet":[],"DataSize":0,"Fault":null,"JobId":"64ba7350-49e1-47f5-9d81-c623fdff141d" "运行时间":34554}}
dbresult 类型是什么样子的？

标签： c# javascript jquery json wcf

【解决方案1】：

要访问 cmets 中提到的 datasize、runtime 和 jobid 值，您首先需要在 HTML 中添加一些元素以显示这些值：

<div>
    <p class="app-datasize">The datasize is </p>
    <p class="app-runtime">The runtime is </p>
    <p class="app-jobid">The job id is </p>
</div>

然后更新您的 JS 以从收到的 JSON 中检索这些值：

$.ajax({
    url: "http://localhost:25524/DBService.svc/json/db=TestDB/query=none"
}).then(function(data) {
   $('.app-datasize').append(data.GetDataResult.DataSize);
   $('.app-runtime').append(data.GetDataResult.RunTime);
   $('.app-jobid').append(data.GetDataResult.JobId);
});

【讨论】：

【解决方案2】：

希望这个简单的代码对您有所帮助：

$.ajax({  
  type: "POST",  
  url: "your service url", 
  headers: { "Content-Type": "application/json" },   
  data: { name: "John", location: "Boston" }  
})  
  .done(function( result) {  
    alert( "Data Saved: " + result.GetDataResult );  
  });

【讨论】：