title: How to call web service hosted in IIS using JQuery and AngularJS
body: <p>I want to use web service using JQuery In Hybrid app. For That i have created html page using AngularJS.</p>
  
  <pre><code>&lt;form id="form1" ng-controller="EmpCtrl" ng-submit="save()"&gt;     
      &lt;div style="font-family: Verdana; font-size: 12px; margin-left: 450px;"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;Id :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="txtEmpID" ng-model="EmpID" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;First Name :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="txtEmpFirstName" ng-model="EmpFirstName" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;Last Name :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="txtEmpLastName" ng-model="EmpLastName" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;Address :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;textarea id="txtEmpAddress" cols="20" rows="2" ng-model="EmpAddress"&gt;&lt;/textarea&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;City :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="txtCity" ng-model="EmpCity" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;Pin Code :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="txtPinCode" ng-model="EmpPincode"    /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;State :
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;input type="text" id="txtState" ng-model="EmpState" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: right;"&gt;Country :
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input type="text" id="txtCountry" ng-model="EmpCountry" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" style="text-align: center;"&gt;
                      &lt;input type="submit" id="btnSubmit" value="Submit" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;input type="button" id="btnFetch" value="Fetch" ng-click="getEmployee()"/&gt;
          &lt;/div&gt;
  
          &lt;div id="divTesting"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And create JQuery. In which i defined ng-app and ng-controller:</p>
  
  <pre><code>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 = 
              "&lt;table border='0'&gt;" +
              "&lt;tr&gt;" +
                  "&lt;td&gt;ID&lt;/td&gt;" +
                  "&lt;td&gt;First Name&lt;/td&gt;" +
                  "&lt;td&gt;Last Name&lt;/td&gt;" +
                  "&lt;td&gt;Address&lt;/td&gt;" +
                  "&lt;td&gt;City&lt;/td&gt;" +
                  "&lt;td&gt;PinCode&lt;/td&gt;" +
                  "&lt;td&gt;State&lt;/td&gt;" +
                  "&lt;td&gt;Country&lt;/td&gt;" +
              "&lt;/tr&gt;";
          for (var i = 0; i &lt; data.d.length; i++) {
              TableContent += "&lt;tr&gt;" +
                              "&lt;td&gt;" + data.d[i].ID + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].FirstName + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].LastName + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].Address + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].City + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].Pincode + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].State + "&lt;/td&gt;" +
                              "&lt;td&gt;" + data.d[i].Country + "&lt;/td&gt;" +
                              "&lt;/tr&gt;";                
              TableContent += "&lt;/table&gt;";
              $("#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");
        }
      });
    };
  }    
  </code></pre>
  
  <p>It's work fine when i use url: <code>EmpService.asmx/InsertEmployee</code> and  url: <code>EmpService.asmx/GetEmployeeDetails</code>  but when i use Hosted IIS web service (<code>http://www.athithi.com/EmpService.asmx/InsertEmployee('')</code> and <code>http://www.athithi.com/EmpService.asmx/GetEmployeeDetails</code>) it does not work. properly.</p>