How to call web service hosted in IIS using JQuery and AngularJS

Question

I want to use web service using JQuery In Hybrid app. For That i have created html page using AngularJS.

<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>

And create JQuery. In which i defined ng-app and ng-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");
      }
    });
  };
}

It's work fine when i use url: EmpService.asmx/InsertEmployee and url: EmpService.asmx/GetEmployeeDetails but when i use Hosted IIS web service (http://www.athithi.com/EmpService.asmx/InsertEmployee('') and http://www.athithi.com/EmpService.asmx/GetEmployeeDetails) it does not work. properly.

Try to get the actual error message by replacing your error callback of `alert("err hello")` with `console.log(msg)`. You will probably end up with an error message that looks something like `No 'Access-Control-Allow-Origin' header is present on the requested resource.` — ivan.sim, Oct 09 '14 at 05:35
Mr Isim i am getting same error message(No 'Access-Control-Allow-Origin' header is present on the requested resource). how can we remove that error. — Prince Bhardwaj, Oct 10 '14 at 05:45
Just gonna say, Angular has everything you need built in, why on earth would you use jQuery as well. For DOM manipulation Angular does it so much better than what you've done. And you don't have to worry about it. — Callum Linington, Oct 10 '14 at 06:58
thanks @isim, your answer help me to solve my problem. it's working, Now i am retrieving data from database using web service in Jquery with cross domain functionality . I have one question, Can you help me to insert data using web service in jquery with cross domain functionality. — Prince Bhardwaj, Oct 30 '14 at 10:23

score 1 · Accepted Answer · edited May 23 '17 at 12:06

The reason why you are seeing the No 'Access-Control-Allow-Origin' header is present on the requested resource. error is because of the same origin policy restriction on Javascript. In other words, if your HTML pages are hosted under the domain www.example.com, then you can only make AJAX requests to services located at exactly the same domain i.e. www.example.com.

This post contains ways to get around this restriction.

But in your case, we will try to make things simple for you:

First of all, you can try deploy your client codes (HTML, JQuery, AngularJS) to the same domain http://www.athithi.com (presumably, the same IIS?) as your web service. If you can package your client codes and web services codes into one application, then you won't even need to specify the domain in your AJAX calls.

If that doesn't work, you can update your jquery codes to specified the dataType of your ajax call to be jsonp like this:

$.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) { .. }
  ...
});

Finally, if you have administrative privilege over the IIS, you can enable the access-control-allow-origin settings in the web.config file by doing this (replace <client_url> with where your client will be hosted):

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

score 0 · Answer 2 · answered Oct 09 '14 at 05:37

0

Your server is throwing this error:

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

Which most of the time means HTTP GET and HTTP POST are disabled for WebServices on your server. To enable them adjust your web.config according to:

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

answered Oct 09 '14 at 05:37

Saeb Amini

23,054
9
78
76

you are right Mr Amini. That service giving error because we did not pass the parameter. But Mr Amini i defined all the thing in Jquery even than i always get error message when i used url: "http://www.athithi.com/EmpService.asmx/InsertEmployee" service instead of url: "EmpService.asmx/InsertEmployee", – Prince Bhardwaj Oct 09 '14 at 06:07

How to call web service hosted in IIS using JQuery and AngularJS

2 Answers2