как проверить и получить результат для вызова API через jquery ajax

Question

Я пытаюсь запустить API через jquery ajax с помощью URL и параметра с помощью метода post. здесь я проверяю, доступна ли доставка по указанному пин-коду для одного из веб-сайтов e-com или нет, пожалуйста, помогите мне узнать, как проверить или получить данные из ответа API.

Мой сценарий:

<script type="text/javascript"> 
$(document).ready(function () {
    $('#check').click(function(){
        var api_url = 'http://example.com/webservices/b2cpincodecheck.jsp';
        var key = '4A8DA5E635656'; 
        var pincode = 604408 ;

        if(pincode=="") {
            alert("please enter the pincode");
        } else {
            $.ajax({
                url:api_url+"?reqid="+key+"&pincode="+pincode,
                dataType: "text/json",
                type: "POST",
                success: function(result){
                    //console.log(result);
                    if(result) {
                        alert("Delivery is available!");
                    } else {
                        alert("Delivery is not available!");
                    }
                }
            })
        }  
    });
});
</script> 

Согласно ответу API в данном документе, я получу данные в XML формате

Их ответ:

<response>
<result>successful</result>
<pinCode>604408</pinCode>
<ouCode>abc</ouCode>
</response>

Пожалуйста, помогите мне узнать, как проверить или получить данные из ответа API. Заранее спасибо.

Answer 1

jQuery AJAX Метод заключается в загрузке данных с внешнего веб-сайта посредством вызова API и получения ответа в форматах JSON или XML. В этом примере показано, как просто выполнить такие вызовы API в jQuery AJAX. Примерно так:

$(document).ready(function () {
    $("#submit").click(function (e) {
        var validate = Validate();
        $("#message").html(validate);
        if (validate.length == 0) {
            $.ajax({
                type: "POST",
                url: "http://api.openweathermap.org/data/2.5/weather?id=" + $("#citySelect").val() + "&appid=API-KEY&units=metric",
                dataType: "json",
                success: function (result, status, xhr) {
                    var table = $("<p>Weather Description</p>");

                    table.append("<p>City:</p>" + result["name"] + "</p>");
                    table.append("<p>Country:</p>" + result["sys"]["country"] + "</p>");
                    table.append("<p>Current Temperature:</p>" + result["main"]["temp"] + "°C</p>");
                    table.append("<p>Humidity:</p>" + result["main"]["humidity"] + "</p>");
                    table.append("<tr><td>Weather:</p>" + result["weather"][0]["description"] + "</p>");

                    $("#message").html(p);
                },
                error: function (xhr, status, error) {
                    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
                }
            });
        }
    });

Чтобы получить результат <div id="message"></div>

Answer 2

$(document).ready(function () {
    $('#check').click(function(){
        var api_url = 'http://example.com/webservices/b2cpincodecheck.jsp';
        var key = '4A8DA5E635656'; 
        var pincode = 604408 ;

        if(pincode=="") {
            alert("please enter the pincode");
        } else {
            $.ajax({
                url:api_url+"?reqid="+key+"&pincode="+pincode,
                dataType: "xml",
                type: "POST",
                success: function(result, status, jqXHR){
                    console.log(loadData(result || jqXHR.responseText))
                }
            })
        }
    });
});

function loadData(xml) {
  var incubator;
  if (typeof xml === "string") {
    incubator = document.createElement("div");
    incubator.innerHTML = xml;
  } else {
    incubator = xml;
  }
  return {
    "response": {
      "result": incubator.querySelector("result").textContent,
      "pinCode": incubator.querySelector("pinCode").textContent,
      "ouCode": incubator.querySelector("ouCode").textContent,
    }
  }
}

function xmlToObject(xml) {
  var incubator = document.createElement("div");
  incubator.innerHTML = xml;
  return Array.prototype.map.call(incubator.childNodes, nodeToObject)
}

function nodeToObject(node) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    return {
      nodeName: node.nodeName.toLowerCase(),
      attributes: nodeAttributesToObject(node),
      childNodes: Array.prototype.map.call(node.childNodes, nodeToObject)
    };
  }
  if (node.nodeType === Node.TEXT_NODE) {
    return node.textContent;
  }
}

function nodeAttributesToObject(node) {
  var result = {};
  Array.prototype.forEach.call(node.attributes, function (attr) {
    result[attr.name] = attr.value;
  });
  return result;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вот два примера извлечения данных из xml:

1. функция loadData получить точное поле, которое вы ожидаете
2. функция xmlToObject может помочь вам пройти XML, как если бы это был простой JavaScript объект.

Пожалуйста, будьте осторожны: jQuery ajax настройка dataType должна быть пустой или в прямом формате (ie: "json", а не "text/json"), здесь вы должны установить значение "xml".

Надеюсь тебе поможет!