Angularjs如何调用 web 服务承载于 IIS 使用 JQuery 和 AngularJS 中

发布时间: 2017/4/30 0:24:28
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要使用 web 服务使用 JQuery 在混合应用程序。为此,我创建了使用 AngularJS 的 html 页。

<form id="form1" ng-controller="EmpCtrl" ng-submit="save()">     
    <div style="font-family: Verdana; font-size: 12px; margin-left: 450px;">
        <table>
            <tr>
                <td style="text-align: right;">Id :
                </td>
                <td>
                    <input type="text" id="txtEmpID" ng-model="EmpID" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">First Name :
                </td>
                <td>
                    <input type="text" id="txtEmpFirstName" ng-model="EmpFirstName" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">Last Name :
                </td>
                <td>
                    <input type="text" id="txtEmpLastName" ng-model="EmpLastName" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">Address :
                </td>
                <td>
                    <textarea id="txtEmpAddress" cols="20" rows="2" ng-model="EmpAddress"></textarea>
                </td>
                </tr>
                <tr>
                <td style="text-align: right;">City :
                </td>
                <td>
                    <input type="text" id="txtCity" ng-model="EmpCity" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">Pin Code :
                </td>
                <td>
                    <input type="text" id="txtPinCode" ng-model="EmpPincode"    />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">State :
                </td>

                <td>
                    <input type="text" id="txtState" ng-model="EmpState" />
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">Country :
                </td>
                <td>
                    <input type="text" id="txtCountry" ng-model="EmpCountry" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="submit" id="btnSubmit" value="Submit" />
                </td>
            </tr>
        </table>
        </div>

        <div>
            <input type="button" id="btnFetch" value="Fetch" ng-click="getEmployee()"/>
        </div>

        <div id="divTesting">
        </div>

和创建 JQuery。在我定义的 ng-appng-controller :

function EmpCtrl($scope)
{
  $scope.getEmployee = function () {
    $.ajax({
      type: "POST",
      url: 'http://www.athithi.com/EmpService.asmx/GetEmployeeDetails',
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",            
      success: function (data) {                
        var TableContent = 
            "<table border='0'>" +
            "<tr>" +
                "<td>ID</td>" +
                "<td>First Name</td>" +
                "<td>Last Name</td>" +
                "<td>Address</td>" +
                "<td>City</td>" +
                "<td>PinCode</td>" +
                "<td>State</td>" +
                "<td>Country</td>" +
            "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                            "<td>" + data.d[i].ID + "</td>" +
                            "<td>" + data.d[i].FirstName + "</td>" +
                            "<td>" + data.d[i].LastName + "</td>" +
                            "<td>" + data.d[i].Address + "</td>" +
                            "<td>" + data.d[i].City + "</td>" +
                            "<td>" + data.d[i].Pincode + "</td>" +
                            "<td>" + data.d[i].State + "</td>" +
                            "<td>" + data.d[i].Country + "</td>" +
                            "</tr>";                
            TableContent += "</table>";
            $("#divTesting").html(TableContent);
        }
      },
      error: function (msg) {
        alert("Error");
      }
    });
  };
  $scope.save = function () {
    $.ajax({
      type: "POST",
      url: "EmpService.asmx/InsertEmployee",
      data: "{'empID':'" + $scope.EmpID + "','firstName':'" + $scope.EmpFirstName + "','lastName':'" + $scope.EmpLastName + "','address':'" + $scope.EmpAddress + "','city':'" + $scope.EmpCity + "','pincode':'" + $scope.EmpPincode + "','state':'" + $scope.EmpState + "','country':'" + $scope.country + "'}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (msg) {
        alert(msg.d);
      },
      error: function (msg) {
        alert("err hello");
      }
    });
  };
}    

它的工作好,当我使用 url: EmpService.asmx/InsertEmployee 和 url: EmpService.asmx/GetEmployeeDetails 但是当我使用承载 IIS web 服务 ( http://www.athithi.com/EmpService.asmx/InsertEmployee('')http://www.athithi.com/EmpService.asmx/GetEmployeeDetails ) 它不能工作正常。

解决方法 1:

为什么你所看到的原因 No 'Access-Control-Allow-Origin' header is present on the requested resource. 错误是由于 Javascript 的同源策略限制。换句话说,如果在域下托管您的 HTML 页面,则 www.example.com ,然后你只能对服务即位于完全相同的域进行 AJAX 请求 www.example.com

张贴包含如何绕过此限制。

但在你的情况,我们会为你做的事情简单︰

首先,你可以尝试为您的 web 服务部署到同一域http://www.athithi.com (大概是,同一个 IIS?) 你客户端代码 (HTML,JQuery,AngularJS)。如果您可以将您的客户端代码和 web 服务代码打包到一个应用程序中,然后你甚至不需要在您的 AJAX 调用中指定的域。

如果无法正常工作,您可以更新您的 jquery 代码来指定 dataType 的你的 ajax 调用要 jsonp 像这样︰

$.ajax({
  type: "POST",
  url: 'http://www.athithi.com/EmpService.asmx/GetEmployeeDetails',
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "jsonp", // change data type to jsonp
  crossDomain: true, // enable cross-domain requests
  success: function (data) { .. }
  ...
});

最后,如果您在 IIS 拥有管理员权限,则可以启用 access-control-allow-origin 中的设置 web.config 这样的文件 (替换 <client_url> 与您的客户端所在):

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="<client_url>" />
        </customHeaders>
    </httpProtocol>
<system.webServer>
赞助商