ฉันมีหน้า HTML พร้อมปุ่มบน เมื่อฉันคลิกที่ปุ่มนั้นฉันต้องเรียก REST Web Service API ฉันพยายามค้นหาออนไลน์ทุกที่ ไม่มีเงื่อนงำใด ๆ ใครสามารถให้โอกาสฉัน / หัวหน้าทีมในเรื่องนี้ได้บ้าง ชื่นชมมาก
คำตอบ:
ฉันประหลาดใจที่ไม่มีใครพูดถึง Fetch API ใหม่ซึ่งสนับสนุนโดยเบราว์เซอร์ทั้งหมดยกเว้น IE11 ในขณะที่เขียน มันลดความซับซ้อนของไวยากรณ์ XMLHttpRequest ที่คุณเห็นในตัวอย่างอื่น ๆ
API มีจำนวนมากขึ้นแต่เริ่มต้นด้วยfetch()วิธีการ มันต้องใช้สองข้อโต้แย้ง:
รับง่าย ๆ :
const userAction = async () => {
const response = await fetch('http://example.com/movies.json');
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
}สร้างคำตอบยอดนิยมก่อนหน้านี้อีกครั้ง POST:
const userAction = async () => {
const response = await fetch('http://example.com/movies.json', {
method: 'POST',
body: myBody, // string or object
headers: {
'Content-Type': 'application/json'
}
});
const myJson = await response.json(); //extract JSON from the http response
// do something with myJson
}button.addEventListener('click', userAction);หรือ<button onclick="userAction()" />
Javascript ของคุณ:
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>สำหรับข้อมูลเพิ่มเติมไปที่ลิงค์ต่อไปนี้(อัพเดท 2017/01/11)
xhttp.open("POST", "Your Rest URL Here", false);มิฉะนั้น xhttp.responseText จะไม่มีผลลัพธ์ แต่ดังที่กล่าวไว้ก่อนหน้านี้มันจะถูกยกเลิกเร็ว ๆ นี้
xhttp.setRequestHeader("Content-type", "application/json");" - นี่เป็นเรื่องโกหก คุณไม่ได้ส่ง JSON ให้กับsend()วิธีการนี้
นี่คืออีกการเรียก Javascript REST API ด้วยการรับรองความถูกต้องโดยใช้ 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);
}
});
});ฉันคิดว่าเพิ่มถ้า (this.readyState == 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();ก่อนที่เราจะพยายามวางอะไรไว้ที่ส่วนหน้าของเว็บไซต์เรามาเปิดการเชื่อมต่อกับ API กันก่อน เราจะใช้วัตถุ XMLHttpRequest ซึ่งเป็นวิธีการเปิดไฟล์และทำการร้องขอ HTTP
เราจะสร้างตัวแปรคำขอและกำหนดวัตถุ XMLHttpRequest ใหม่ให้กับมัน จากนั้นเราจะเปิดการเชื่อมต่อใหม่ด้วยเมธอด open () - ในอาร์กิวเมนต์เราจะระบุประเภทของคำขอเป็น GET เช่นเดียวกับ URL ของ API ปลายทาง คำขอเสร็จสมบูรณ์และเราสามารถเข้าถึงข้อมูลภายในฟังก์ชั่น onload เมื่อเสร็จแล้วเราจะส่งคำขอ
// สร้างตัวแปรคำขอและกำหนดวัตถุ 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()วิธีปกติคือการไปกับ PHP และ Ajax แต่สำหรับความต้องการของคุณด้านล่างจะทำงานได้ดี
<body>
https://www.google.com/controller/Add/2/2<br>
https://www.google.com/controller/Sub/5/2<br>
https://www.google.com/controller/Multi/3/2<br><br>
<input type="text" id="url" placeholder="RESTful URL" />
<input type="button" id="sub" value="Answer" />
<p>
<div id="display"></div>
</body>
<script type="text/javascript">
document.getElementById('sub').onclick = function(){
var url = document.getElementById('url').value;
var controller = null;
var method = null;
var parm = [];
//validating URLs
function URLValidation(url){
if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
var x = url.split('/');
controller = x[3];
method = x[4];
parm[0] = x[5];
parm[1] = x[6];
}
}
//Calculations
function Add(a,b){
return Number(a)+ Number(b);
}
function Sub(a,b){
return Number(a)/Number(b);
}
function Multi(a,b){
return Number(a)*Number(b);
}
//JSON Response
function ResponseRequest(status,res){
var res = {status: status, response: res};
document.getElementById('display').innerHTML = JSON.stringify(res);
}
//Process
function ProcessRequest(){
if(method=="Add"){
ResponseRequest("200",Add(parm[0],parm[1]));
}else if(method=="Sub"){
ResponseRequest("200",Sub(parm[0],parm[1]));
}else if(method=="Multi"){
ResponseRequest("200",Multi(parm[0],parm[1]));
}else {
ResponseRequest("404","Not Found");
}
}
URLValidation(url);
ProcessRequest();
};
</script>