使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)-前端开发

下面是使用jQuery Ajax访问WCF服务的完整攻略。

下面是使用jQuery Ajax访问WCF服务的完整攻略。

1. 前置条件

在使用jQuery Ajax访问WCF服务之前，需要先准备以下环境：

WCF服务：需要创建一个能够响应GET、POST、PUT、DELETE请求的WCF服务。可以使用Visual Studio创建一个WCF服务应用程序，然后添加一些服务操作来实现GET、POST、PUT、DELETE请求的处理。
jQuery：需要在网页中引入jQuery库。

2. 使用jQuery Ajax发送请求

使用jQuery Ajax发送请求时，需要指定请求的方法和参数。下面介绍如何使用jQuery Ajax访问WCF服务。

2.1 GET请求

使用GET请求可以获取WCF服务返回的数据，需要指定请求的URL和数据类型。示例代码如下：

$.ajax({
    url: 'http://localhost:12345/MyService/GetData?id=1',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        // 处理获取的数据
    },
    error: function(xhr, status, error) {
        // 处理错误情况
    }
});

上面的代码使用GET请求访问WCF服务，请求的URL为http://localhost:12345/MyService/GetData，其中id=1表示请求的参数。dataType指定返回数据的类型为json。在请求成功时，可以通过success回调函数来处理返回的数据。

2.2 POST请求

使用POST请求可以向WCF服务提交数据，需要指定请求的URL、请求的数据和数据类型。示例代码如下：

$.ajax({
    url: 'http://localhost:12345/MyService/AddData',
    type: 'POST',
    data: {id: 1, name: '张三'},
    dataType: 'json',
    success: function(data) {
        // 处理添加数据后返回的数据
    },
    error: function(xhr, status, error) {
        // 处理错误情况
    }
});

上面的代码使用POST请求访问WCF服务，请求的URL为http://localhost:12345/MyService/AddData，请求的数据为{id: 1, name: '张三'}，dataType指定返回数据的类型为json。在请求成功时，可以通过success回调函数来处理返回的数据。

2.3 PUT请求

使用PUT请求可以向WCF服务更新数据，需要指定请求的URL、请求的数据和数据类型。示例代码如下：

$.ajax({
    url: 'http://localhost:12345/MyService/UpdateData',
    type: 'PUT',
    data: {id: 1, name: '李四'},
    dataType: 'json',
    success: function(data) {
        // 处理更新数据后返回的数据
    },
    error: function(xhr, status, error) {
        // 处理错误情况
    }
});

上面的代码使用PUT请求访问WCF服务，请求的URL为http://localhost:12345/MyService/UpdateData，请求的数据为{id: 1, name: '李四'}，dataType指定返回数据的类型为json。在请求成功时，可以通过success回调函数来处理返回的数据。

2.4 DELETE请求

使用DELETE请求可以向WCF服务删除数据，需要指定请求的URL和数据类型。示例代码如下：

$.ajax({
    url: 'http://localhost:12345/MyService/DeleteData?id=1',
    type: 'DELETE',
    dataType: 'json',
    success: function(data) {
        // 处理删除数据后返回的数据
    },
    error: function(xhr, status, error) {
        // 处理错误情况
    }
});

上面的代码使用DELETE请求访问WCF服务，请求的URL为http://localhost:12345/MyService/DeleteData?id=1，其中id=1表示请求的参数。dataType指定返回数据的类型为json。在请求成功时，可以通过success回调函数来处理返回的数据。

3. 支持CORS跨域访问

如果WCF服务和网页不在同一个域下，需要使用CORS（Cross-Origin Resource Sharing）来支持跨域访问。可以在WCF服务的配置文件中添加以下配置来支持CORS：

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

以上配置中，Access-Control-Allow-Origin指定允许哪些域名进行访问，value值为*表示允许所有域名进行访问；Access-Control-Allow-Headers指定允许哪些HTTP头部信息；Access-Control-Allow-Methods指定允许哪些HTTP方法。

4. 示例说明

下面举两个例子说明如何使用jQuery Ajax访问WCF服务。

4.1 示例一

假设有一个WCF服务可以接收GET请求，返回人员信息。请求的URL为http://localhost:12345/MyService/GetPersonInfo，参数为id。返回的数据类型为json。

下面是使用jQuery Ajax访问该WCF服务的代码：

$.ajax({
    url: 'http://localhost:12345/MyService/GetPersonInfo?id=1',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log(status + ': ' + error);
    }
});

上面的代码请求http://localhost:12345/MyService/GetPersonInfo?id=1，成功时打印返回的数据，失败时打印错误信息。

4.2 示例二

假设有一个WCF服务可以接收POST请求，添加人员信息。请求的URL为http://localhost:12345/MyService/AddPersonInfo，参数为id和name。返回的数据类型为json。

下面是使用jQuery Ajax访问该WCF服务的代码：

$.ajax({
    url: 'http://localhost:12345/MyService/AddPersonInfo',
    type: 'POST',
    data: {id: 1, name: '张三'},
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log(status + ': ' + error);
    }
});