javascript - जावास्क्रिप्ट से REST वेब सेवा एपीआई कैसे कॉल करें?




html web-services (5)

मेरे पास एक HTML पेज है जिस पर एक बटन है। जब मैं उस बटन पर क्लिक करता हूं, तो मुझे REST वेब सेवा API को कॉल करना होगा। मैंने हर जगह ऑनलाइन सर्च करने की कोशिश की। कोई सुराग नहीं। क्या कोई मुझे इस पर लीड / हेडस्टार्ट दे सकता है? बहुत ज्यादा अधिमूल्यित।


आपकी जावास्क्रिप्ट:

function UserAction() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             alert(this.responseText);
         }
    };
    xhttp.open("POST", "Your Rest URL Here", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send("Your JSON Data Here");
}

आपका बटन कार्रवाई ::

<button type="submit" onclick="UserAction()">Search</button>

अधिक जानकारी के लिए निम्न link (अपडेट किया गया 2017/01/11)


इससे पहले कि हम वेबसाइट के सामने के छोर पर कुछ भी डालने की कोशिश करें, आइए एक कनेक्शन खोलें। हम XMLHttpRequest ऑब्जेक्ट्स का उपयोग करके ऐसा करेंगे, जो फ़ाइलों को खोलने और HTTP अनुरोध करने का एक तरीका है।

हम एक अनुरोध चर बनाएंगे और इसे एक नया XMLHttpRequest ऑब्जेक्ट असाइन करेंगे। फिर हम खुले () विधि के साथ एक नया कनेक्शन खोलेंगे - तर्कों में हम GET के साथ-साथ API समापन बिंदु के URL के प्रकार के अनुरोध को निर्दिष्ट करेंगे। अनुरोध पूरा हो गया है और हम ऑनलोड फ़ंक्शन के अंदर डेटा तक पहुंच सकते हैं। जब हम काम पूरा कर लेंगे, हम अनुरोध भेज देंगे।
// एक अनुरोध चर बनाएं और इसे एक नया XMLHttpRequest ऑब्जेक्ट असाइन करें। var अनुरोध = नया XMLHttpRequest ()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)

request.onload = function () {
  // Begin accessing JSON data here
  }
}

// Send request
request.send()

मुझे लगता है कि अगर (यह पहले से ही == 4 && this.status == 200) को जोड़ा जाए तो बेहतर है:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
        var response = xhttp.responseText;
        console.log("ok"+response);
    }
};
xhttp.open("GET", "your url", true);

xhttp.send();

यहाँ json का उपयोग करके प्रमाणीकरण के साथ एक और जावास्क्रिप्ट रीस्ट एपीआई कॉल है:

<script type="text/javascript" language="javascript">

function send()
{
    var urlvariable;

    urlvariable = "text";

    var ItemJSON;

    ItemJSON = '[  {    "Id": 1,    "ProductID": "1",    "Quantity": 1,  },  {    "Id": 1,    "ProductID": "2",    "Quantity": 2,  }]';

    URL = "https://testrestapi.com/additems?var=" + urlvariable;  //Your URL

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
    xmlhttp.open("POST", URL, false);
    xmlhttp.setRequestHeader("Content-Type", "application/json");
    xmlhttp.setRequestHeader('Authorization', 'Basic ' + window.btoa('apiusername:apiuserpassword')); //in prod, you should encrypt user name and password and provide encrypted keys here instead 
    xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
    xmlhttp.send(ItemJSON);
    alert(xmlhttp.responseText);
    document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>";
}

function callbackFunction(xmlhttp) 
{
    //alert(xmlhttp.responseXML);
}
</script>


<html>
<body id='bod'><button type="submit" onclick="javascript:send()">call</button>
<div id='div'>

</div></body>
</html>

    $("button").on("click",function(){
      //console.log("hii");
      $.ajax({
        headers:{  
           "key":"your key",
     "Accept":"application/json",//depends on your api
      "Content-type":"application/x-www-form-urlencoded"//depends on your api
        },   url:"url you need",
        success:function(response){
          var r=JSON.parse(response);
          $("#main").html(r.base);
        }
      });
});





web-services