Hướng dẫn send data to url javascript - gửi dữ liệu đến url javascript

JavaScript có các mô -đun và phương thức tuyệt vời để thực hiện các yêu cầu HTTP có thể được sử dụng để gửi hoặc nhận dữ liệu từ tài nguyên phía máy chủ. Trong bài viết này, chúng tôi sẽ xem xét một vài cách phổ biến để thực hiện các yêu cầu HTTP trong JavaScript.

Ajax

AJAX là cách truyền thống để thực hiện yêu cầu HTTP không đồng bộ. Dữ liệu có thể được gửi bằng phương thức bài HTTP và nhận được bằng phương thức HTTP GET. Hãy cùng xem và đưa ra yêu cầu GET. Tôi sẽ sử dụng JsonPlaceholder, API REST trực tuyến miễn phí cho các nhà phát triển trả về dữ liệu ngẫu nhiên ở định dạng JSON.

Để thực hiện cuộc gọi HTTP trong AJAX, bạn cần khởi tạo phương thức

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

Chúng tôi đăng nhập phản hồi HTTP vào bảng điều khiển bằng cách sử dụng thuộc tính

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Nếu bạn xem bảng điều khiển trình duyệt của mình, nó sẽ trả về một mảng dữ liệu ở định dạng JSON. Nhưng làm thế nào chúng ta biết nếu yêu cầu được thực hiện? Nói cách khác, làm thế nào chúng ta có thể xử lý các câu trả lời bằng AJAX?

Thuộc tính

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

Nếu

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

/** 
 * Snippet Reference to: 
 * http://api.jquery.com/jQuery.post/   
**/

Ngoài việc thực hiện trực tiếp một cuộc gọi AJAX với JavaScript, còn có các phương thức thực hiện một cuộc gọi HTTP mạnh mẽ hơn như

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Phương pháp jQuery

JQuery có nhiều phương pháp để dễ dàng xử lý các yêu cầu HTTP. Để sử dụng các phương pháp này, bạn sẽ cần đưa thư viện jQuery vào dự án của mình.

$.ajax

JQuery Ajax là một trong những phương pháp đơn giản nhất để thực hiện cuộc gọi HTTP.

Phương thức $ .AJAX có nhiều tham số, một số trong đó được yêu cầu và một số khác tùy chọn. Nó chứa hai tùy chọn gọi lại

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Phương thức $ .Get

Phương thức $ .get được sử dụng để thực hiện các yêu cầu GET. Phải mất hai tham số: điểm cuối và chức năng gọi lại.

$.post

Phương pháp

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

$.getJSON

Phương pháp

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

JQuery có tất cả các phương thức này để yêu cầu hoặc đăng dữ liệu lên một máy chủ từ xa. Nhưng bạn thực sự có thể đặt tất cả các phương pháp này vào một: phương thức

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

tìm về

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Hàm

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Như bạn có thể thấy,

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Axios

Axios là một thư viện nguồn mở để thực hiện các yêu cầu HTTP và cung cấp nhiều tính năng tuyệt vời. Hãy để một cái nhìn về cách nó hoạt động.

Usage:

Đầu tiên, bạn cần phải bao gồm Axios. Có hai cách để bao gồm các Axios trong dự án của bạn.

Đầu tiên, bạn có thể sử dụng NPM:

npm install axios --save

Sau đó, bạn cần phải nhập nó

import axios from 'axios'

Thứ hai, bạn có thể bao gồm Axios bằng CDN.

Đưa ra yêu cầu với Axios:

Với Axios, bạn có thể sử dụng GET và

GET:

POST:

Axios trả lại một lời hứa của người Viking. Nếu bạn quen thuộc với những lời hứa, có lẽ bạn sẽ biết rằng một lời hứa có thể thực hiện nhiều yêu cầu. Bạn có thể làm điều tương tự với Axios và chạy nhiều yêu cầu cùng một lúc.

Axios hỗ trợ nhiều phương pháp và tùy chọn khác. Bạn có thể khám phá chúng ở đây.

Góc httpclient

Angular có mô -đun HTTP riêng hoạt động với các ứng dụng Angular. Nó sử dụng thư viện RXJS để xử lý các yêu cầu không đồng bộ và cung cấp nhiều tùy chọn để thực hiện các yêu cầu HTTP.

Thực hiện cuộc gọi đến máy chủ bằng cách sử dụng httpclient góc cạnh

Để thực hiện yêu cầu bằng cách sử dụng httpclient góc, chúng tôi phải chạy mã của chúng tôi bên trong một ứng dụng góc. Vì vậy, tôi đã tạo ra một. Nếu bạn không quen thuộc với Angular, hãy xem bài viết của tôi, hãy tìm hiểu cách tạo ứng dụng Angular đầu tiên của bạn trong 20 phút.

Điều đầu tiên chúng ta cần làm là nhập

Sau đó, chúng tôi phải tạo một dịch vụ để xử lý các yêu cầu. Bạn có thể dễ dàng tạo một dịch vụ bằng cách sử dụng Angular CLI.

ng g service  FetchdataService

Sau đó, chúng tôi cần nhập httpclient trong dịch vụ

Và trong

npm install axios --save

npm install axios --save

//import
import { FetchdataService } from './fetchdata.service';

Cuối cùng, gọi dịch vụ và chạy nó.

npm install axios --save

Bạn có thể xem ví dụ demo trên Stackblitz.

Gói lên

Chúng tôi chỉ đề cập đến các cách phổ biến nhất để thực hiện yêu cầu cuộc gọi HTTP trong JavaScript.

Cảm ơn bạn đã dành thời gian. Nếu bạn thích nó, hãy vỗ tới 50, nhấp vào theo dõi và liên hệ với tôi trên Twitter.

Nhân tiện, gần đây tôi đã làm việc với một nhóm kỹ sư phần mềm mạnh mẽ cho một trong những ứng dụng di động của tôi. Tổ chức này rất tuyệt, và sản phẩm được giao rất nhanh, nhanh hơn nhiều so với các công ty và dịch giả tự do khác mà tôi đã làm việc cùng, và tôi nghĩ rằng tôi có thể thực sự giới thiệu họ cho các dự án khác ngoài kia. Bắn email cho tôi nếu bạn muốn liên lạc -.