Позвоните в веб-сервис angularJS

0

Вот мой пример, я ничего не получаю при нажатии кнопки.

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

Мне нужно получить результат от веб-службы.

ПРИМЕЧАНИЕ. Обновлен новый исходный пример!

  • 0
    Предоставлять сообщения об ошибках из консоли.
  • 0
    @VasiliyStavenko новый источник выше, но опять-таки нет никакой помощи .... postimg.org/image/5pzfdndz7
Теги:
web-services

3 ответа

2
Лучший ответ

Во-первых, ваши файлы кода должны быть вызваны:

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

где defer говорит, что он должен быть загружен после загрузки элементов dom.

Во-вторых, вместо этого

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

Вы должны иметь

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

В-третьих, вместо этого

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

Вы должны иметь

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

в заключение

Вы не можете отправлять запросы AJAX с перекрестным доменом из-за того же ограничения политики происхождения, которое встроено в браузер. Чтобы выполнить эту работу, ваша HTML-страница, содержащая код jQuery, должна размещаться в том же домене, что и веб-служба (http://www.w3schools.com).

Существуют обходные пути, которые включают использование JSONP на сервере, но поскольку ваш веб-сервис SOAP, это не сработает.

Единственный надежный способ сделать эту работу, если вы не можете переместить свой javascript в том же домене, что и веб-служба, - это создать сценарий на стороне сервера, который будет размещаться в том же домене, что и код javascript, и будет действовать как мост между 2 домена. Таким образом, вы отправляете запрос AJAX на свой скрипт на стороне сервера, который, в свою очередь, будет вызывать удаленную веб-службу и возвращать результат.

Если у них есть запрос GET, вы можете использовать прокси-сервер CORS, который делает это. Это просто, как запрос

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

но в этом случае это невозможно.


Пример того, как это сделать в С# (предполагается, что он находится на одном сервере)

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

После этого вы можете создать веб-метод:

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

и назовите его из javascript

$http.get('yourController.aspx/GetFahrenheitFromW3', { params: { Celsius: CelsiusVal } })
  .success(
    function (data) {
      alert("succ: "+data[0]);
    })
  .error(
    function () { 
      alert("error"); 
    }
  ); 
  • 0
    изменить, но опять не работает .... новый источник выше
  • 0
    В любом случае, чтобы избежать CORS, вам нужно использовать прокси-сервис и работать с ним на стороне сервера.
Показать ещё 2 комментария
0

Ваша проблема довольно проста: вы набрали адрес http://. Просто измените:

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

в

http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit'
  • 0
    изменить, но опять не работает .... новый источник выше
0

в вашем коде есть несколько проблем:

  1. ваш URL-адрес неверен: http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' имеет двойной http://...

  2. Ваша функция ошибки написана в неправильном положении:

    $ http.get('...', {params: {...}}).success (функция (данные) {alert ("succ");}).error(function() {alert ("error" );});

будет работать лучше для вас.

Чтобы подчеркнуть ошибку, я определю переменную, чтобы держать ваш get_obj в вашем коде

var httpGet = $http.get('...', { params: { ... } });
httpGet.success(function (data) { alert("succ"); });
**error(function () { alert("error"); });**
  1. даже после того, как вы закончите эти два, существует проблема CORS, пытающаяся получить доступ к w3school.com с любого вашего сервера...

Вы можете найти дополнительную информацию о CORS и SOAP в этом SO-вопросе

  • 0
    Я исправил 1 и 2 шаг. Есть ли у вас бесплатный веб-сервис .asmx с параметром для тестирования моего примера.
  • 0
    что вы имеете в виду бесплатный .asmx webservice с параметрами ... ??

Ещё вопросы

Сообщество Overcoder
Наверх
Меню