如何通過jquery ajax檢查和接收api調用的結果

Question

我正在嘗試使用帶有 post 方法的 URL 和參數通過 jquery ajax 命中 API。 在這里，我正在檢查某個 e-com 網站的給定 Pincode 是否可以交付，請幫助我了解如何從 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格式的響應。 這個例子向你展示了在jQuery AJAX進行這樣的 API 調用是多么容易。像這樣

$(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應為空或直接格式（即： "json" ，而不是"text/json" ），此處應將其設置為"xml" 。

希望它會幫助你！