jQuery ajax调用WCF服务实例(2)

return test_result_list;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

}
}

三、浏览器请求WCF服务

基本上，$.ajax方法需要8个参数：type指定操作方法（如POST）、url指定WCF服务的地址、data是传给WCF的数据（也就是参数）、contentType指定data的格式（如json）和文字编码、dataType指定返回数据的格式、processData指示是否自动将数据处理成application/x-www-form-urlencoded格式、success和error属性指示操作成功或失败后的回调方法。

我们在脚本中定义如下全局变量，以便调用ajax时访问：

复制代码 代码如下:

var Type, Url, Data, ContentType, DataType, ProcessData;

我们编写一个CallService方法，该方法直接调用$.ajax方法，并使用上面定义的参数：

复制代码 代码如下:

function CallService() {
    $.ajax({
        type: Type,
        url: Url,
        data: Data,
        contentType: ContentType,
        dataType: DataType,
        processData: ProcessData,
        success: function (msg) {
            ServiceSucceded(msg);
        },
        error: ServiceFailed
    });
}

以下是调用服务的一个示例，该方法从Year、Month和Date文本框中获取用户输入的数据，并调用WCF服务请求数据：

复制代码 代码如下:

function WcfJson() {
    Type = "POST";
    Url = "http://localhost:8734/TableManagerIntegrationTestService/TestResultService/GetData";
    Data = '{"year":' + $("#Year").val() + ', "month":' + $("#Month").val() + ', "date":' + $("#Date").val() + '}';
    ContentType = "application/json; charset=utf-8";
    DataType = "json"; varProcessData = true;

CallService();
}

在数据请求成功后，会调用success参数指定的回调方法，在此我们就可以处理返回结果。

返回结果是一个json格式的数据，如我们的例子中返回的是一个结果列表。如果不确定它的结构，可以在这里加个断点看看：

可以看到结果就在result对象的GetDataResult属性中。直接访问这个属性的各元素就能得到结果了：

复制代码 代码如下:

function ServiceSucceded(result) {
    if (DataType == "json") {
        mainView.clearItem();

for (var i = 0; i < result.GetDataResult.length; i++) {
            var resultObject = result.GetDataResult[i];

resultCollection.add(resultObject.ServerName, resultObject.DeployDate, resultObject.Build, resultObject.Result, resultObject.ServerInformation);
        }

mainView.render(document.getElementById("logContainer"));
    }
}

resultCollection和mainView是我自定义的两个类，用于存储要显示的数据和绘制表格。代码在这里就不写了。