如何使用JQuery和AngularJS调用托管在IIS中的Web服务

Question

我想在混合应用程序中使用使用JQuery的Web服务。为此，我使用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-应用和NG-控制器：

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"); 
     } 
    }); 
    }; 
}  

它的做工精细当我使用网址：EmpService.asmx/InsertEmployee和网址：EmpService.asmx/GetEmployeeDetails但是当我使用托管IIS Web服务（http://www.athithi.com/EmpService.asmx/InsertEmployee('')和http://www.athithi.com/EmpService.asmx/GetEmployeeDetails）这是行不通的。正常。

Answer 1

为什么你看到的No 'Access-Control-Allow-Origin' header is present on the requested resource.错误的原因是因为在JavaScript中的same origin policy限制。换句话说，如果您的HTML页面位于域www.example.com下，那么您只能向位于完全相同域的服务（即www.example.com）发出AJAX请求。

此post包含解决此限制的方法。

但在你的情况，我们将努力使事情变得简单了你：

首先，你可以尝试部署客户端代码（HTML，JQuery的，AngularJS）到同一个域http://www.athithi.com（据推测，相同的IIS？）作为您的Web服务。如果您可以将客户端代码和Web服务代码打包到一个应用程序中，那么您甚至不需要在AJAX调用中指定域。

如果还是不行，您可以更新您的jQuery代码来指定您的Ajax调用的dataType是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，你通过这样做能够在web.config文件access-control-allow-origin设置（更换<client_url>与您的客户端将被托管）：

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

Answer 2

您的服务器引发此错误：

Request format is unrecognized for URL unexpectedly ending in '/InsertEmployee'

其中大部分的时间是指HTTP GET和HTTP POST是您的服务器上的Web服务禁用。为了让他们根据调整你的web.config：

<configuration> 
    <system.web> 
    <webServices> 
     <protocols> 
      <add name="HttpGet"/> 
      <add name="HttpPost"/> 
     </protocols> 
    </webServices> 
    </system.web> 
</configuration>