首页

Jquery跨域调用wcf实例(返回Jsonp格式) 附源码下载

c#

2020-8-30

【注意事项】

我们通过控制台程序对服务进行寄宿。从下面的配置可以看到我们采用了标准终结点WebHttpEndpoint。为了让服务具有跨域支持的能力,我们必须将标准终结点的crossDomainScriptAccessEnabled属性设置为True。WebHttpBinding也具有同名的属性,如果直接使用WebHttpBinding也需要将该属性设置为True。

如下是app.config

 

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.serviceModel>
    <standardEndpoints>
      <webHttpEndpoint>
        <standardEndpoint crossDomainScriptAccessEnabled="true"/>
      </webHttpEndpoint>
    </standardEndpoints>
    <bindings>
      <webHttpBinding>
        <binding crossDomainScriptAccessEnabled="true" />
      </webHttpBinding>
    </bindings>
    <services>      
      <service name="Artech.WcfServices.Service.EmployeesService">
        <endpoint kind="webHttpEndpoint" 
                  address="http://127.0.0.1:3721/employees"
                  contract="Artech.WcfServices.Service.Interface.IEmployees"/>
      </service>
    </services>
  </system.serviceModel>
</configuration>

前台脚本调用:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>员工列表</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            text-align: center;
        }
        #employees
        {
            border: 1px solid #000000;
            margin: 10px auto;
            background-color: #eee;
        }
        #employees tr
        {
            line-height: 23px;
        }
        #employees th
        {
            background-color: #ccc;
            color: #fff;
        }
        .oddRow
        {
            background-color: #fff;
        }
    </style>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "get",
                url: "http://127.0.0.1:3721/employees/all",
                dataType: "jsonp",
                success: function (employees) {
                    $.each(employees, function (index, value) {
                        var detailUrl = "detail.html?id="   value.Id;
                        var html = "<tr><td>";
                        html  = value.Id   "</td><td>";
                        html  = "<a href='"   detailUrl   "'>"   value.Name   "</a></td><td>";
                        html  = value.Grade   "</td><td>";
                        html  = value.Department   "</td></tr>";
                        $("#employees").append(html);
                    });
                    $("#employees tr:odd").addClass("oddRow");
                }
            });

        });
    </script>
</head>
  <body>
    <table id="employees" width="600px">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>级别</th>
            <th>部门</th>
        </tr>
    </table>
</body>
</html>

wcf代码:

 

using System.Collections.Generic;
using Artech.WcfServices.Service.Interface;
namespace Artech.WcfServices.Service
{
    public class EmployeesService : IEmployees
    {
        public IEnumerable<Employee> GetAll()
        {
            return new List<Employee>
            {
                new Employee{ Id = "001", Name="张三", Department="开发部", Grade = "G6"},    
                new Employee{ Id = "002", Name="李四", Department="人事部", Grade = "G7"}, 
                new Employee{ Id = "003", Name="王五", Department="销售部", Grade = "G8"}
            };
        }
    }
}

 

资源下载此资源下载价格为2D币(VIP免费),请先
资源文件列表
WcfServices/Service/app.config , 744
WcfServices/Service/EmployeesService.cs , 621
WcfServices/Service/Program.cs , 515
WcfServices/Service/Properties/AssemblyInfo.cs , 1426
WcfServices/Service/Service.csproj , 2899
WcfServices/Service.Interface/IEmployees.cs , 560
WcfServices/Service.Interface/Properties/AssemblyInfo.cs , 1446
WcfServices/Service.Interface/Service.Interface.csproj , 2524
WcfServices/WcfServices.sln , 3613
WcfServices/WcfServices.suo , 58880
WcfServices/WebUI/Default.html , 2011
WcfServices/WebUI/Properties/AssemblyInfo.cs , 1381
WcfServices/WebUI/Scripts/jquery-1.7.1.js , 338582
WcfServices/WebUI/WebUI.csproj , 3948
WcfServices/WebUI/WebUI.csproj.user , 1171
没有账号? 忘记密码?

社交账号快速登录