First, your code files should be called:

Question

Here is my example, I don't get anything on button click.

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script type="text/javascript" src="main.js" defer></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body ng-app="myAppModule">
    <div ng-controller="myAppController" style="text-align: center">

        <button ng-click="calculateQuantity()">Calculate</button>

    </div>

    <script>
        var myAppModule = angular.module('myAppModule', []);
        myAppModule.controller('myAppController', function ($scope, $http) {
            var CelsiusVal = "10";
            $scope.calculateQuantity = function () {
                alert("I'm here")
                $http.get('http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit', { params: { Celsius: CelsiusVal } }).
                success(function (data) {alert("succ");})
                .error(function () { alert("error"); }); 
            };
        });
    </script>
</body>
</html>

I need to get a result from a web service.

NOTE Updated new source example!

Answer 1

First, your code files should be called:

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js" defer></script>

where defer tells it should be loaded after dom elements are loaded.

Second, instead

$http.get('http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' ...

you should have

$http.get('http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' ...

Third, instead

.success(function (data) {alert("succ");});
error(function () { alert("error"); });

you should have

.success(function (data) {alert("succ");})
.error(function () { alert("error"); });

Finally

You cannot send cross domain AJAX requests because of the same origin policy restriction that's built into the browsers. In order to make this work your HTML page containing the jQuery code must be hosted on the same domain as the Web Service (http://www.w3schools.com).

There are workarounds that involve using JSONP on the server, but since your web service is SOAP this cannot work.

The only reliable way to make this work if you cannot move your javascript on the same domain as the web service is to build a server side script that will be hosted on the same domain as the javascript code and that will act as a bridge between the 2 domains. So you would send an AJAX request to your server side script which in turn will invoke the remote web service and return the result.

If they had GET request enabled you could use a CORS proxy, that does this. It is simple as querying

"https://crossorigin.me/http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit&Celsius=" + CelsiusVal

but in this case it is not possible.

Example on how to do this in c# (assumes it is in the same server)

public static string GetFahrenheit(string celsius="20")
{
    const string url = "http://www.w3schools.com/xml/tempconvert.asmx";
    const string action = "http://www.w3schools.com/xml/CelsiusToFahrenheit";
    var soapEnvelopeXml = new XmlDocument();
    var soapString =
        $@"
        <soap:Envelope 
            xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' 
            xmlns:xsd='http://www.w3.org/2001/XMLSchema' 
            xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>
            <soap:Body>
            <CelsiusToFahrenheit xmlns ='http://www.w3schools.com/xml/'>
                <Celsius> {celsius} </Celsius>
            </CelsiusToFahrenheit>
            </soap:Body>
        </soap:Envelope>";
    soapEnvelopeXml.LoadXml(soapString);
    var webRequest = (HttpWebRequest)WebRequest.Create(url);
    webRequest.Headers.Add("SOAPAction", action);
    webRequest.ContentType = "text/xml;charset=\"utf-8\"";
    webRequest.Accept = "text/xml";
    webRequest.Method = "POST";
    using (var stream = webRequest.GetRequestStream())
    {
        soapEnvelopeXml.Save(stream);
    }
    var asyncResult = webRequest.BeginGetResponse(null, null);
    asyncResult.AsyncWaitHandle.WaitOne();
    using (var webResponse = webRequest.EndGetResponse(asyncResult))
    using (var rd = new StreamReader(webResponse.GetResponseStream()))
    {
        var soapResult = rd.ReadToEnd();
        var xmlDoc = new XmlDocument();
        xmlDoc.LoadXml(soapResult);
        var nsmgr = new XmlNamespaceManager(xmlDoc.NameTable);
        nsmgr.AddNamespace("soap", "http://schemas.xmlsoap.org/soap/envelope/");
        nsmgr.AddNamespace("w3", "http://www.w3schools.com/xml/");
        nsmgr.AddNamespace("xsd", "http://www.w3.org/2001/XMLSchema");
        nsmgr.AddNamespace("xsi", "http://www.w3.org/2001/XMLSchema-instance");
        var result = xmlDoc.DocumentElement?.SelectSingleNode("/soap:Envelope/soap:Body/w3:CelsiusToFahrenheitResponse/w3:CelsiusToFahrenheitResult", nsmgr)?.InnerText;
        return result;
    }
}

After that you could create a web method :

[WebMethod]
public static string GetFahrenheitFromW3(string celsius)
{
    return GetFahrenheit(celsius);
}

and call it from javascript

$http.get('yourController.aspx/GetFahrenheitFromW3', { params: { Celsius: CelsiusVal } })
  .success(
    function (data) {
      alert("succ: "+data[0]);
    })
  .error(
    function () { 
      alert("error"); 
    }
  );

Answer 2

Your issue is pretty simple: you've misspelled the http:// address. Just change:

http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit'

to

http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit'

Answer 3

there are several issues with your code:

your URL is wrong: http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' has double http://...
Your error function is written in the wrong position:

$http.get('...', { params: { ... } }) .success(function (data) { alert("succ"); }) .error(function () { alert("error"); });

will work better for you.

To emphasize the mistake, i'll define a variable to hold your get_obj in your Code

var httpGet = $http.get('...', { params: { ... } });
httpGet.success(function (data) { alert("succ"); });
**error(function () { alert("error"); });**

even after you finish these two, there is a CORS problem trying to access w3school.com from whatever your server is...

You can find some additional info about CORS and SOAP on this SO Question

Call webservice angularJS

3 个答案:

First, your code files should be called:

Second, instead

Third, instead

Finally