Nếu bạn cũng muốn gửi người dùng đến IP đó, thì bạn sẽ sử dụng POST. Nếu thực sự bạn muốn ở lại cùng một trang, hãy gửi thông tin - Visa Versa thì thực sự một cuộc gọi AJAX sẽ đủ nhất. Dưới đây tôi sử dụng Vanilla JavaScript thay vì bất kỳ thư viện JavaScript nào, mặc dù sử dụng jQuery sẽ cung cấp cho bạn một số cuộc gọi lại/người trợ giúp để làm cho mã của bạn ổn định hơn.
JSfiddle: //jsfiddle.net/atjbq/3/
/**
* Validate Form, else, Send Ajax
**/
function validateform[] {
var x = document.forms["myForm"]["fname"].value;
if [ x == null || x == "" ] {
alert[ "First Name must be filled out" ];
return false;
}
/**
* If POST
* use: xmlhttp.setRequestHeader[
* "Content-type",
* "application/x-www-form-urlencoded"
* ];
**/
var xmlhttp = new XMLHttpRequest[];
xmlhttp.open["GET", "//192.168.1.250?q=" + x, true];
xmlhttp.send[];
return false;
}
First name:
Với jQuery::
/**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
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 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 Để thực hiện cuộc gọi HTTP trong AJAX, bạn cần khởi tạo phương thức Ajax
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.
0 mới, chỉ định phương thức điểm cuối URL và phương thức HTTP [trong trường hợp này nhận được]. Cuối cùng, chúng tôi sử dụng phương thức /**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
1 để gắn kết phương thức HTTP và điểm cuối URL với nhau và gọi phương thức /**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
2 để loại bỏ yêu cầu./**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
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:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
3 có chứa trình xử lý sự kiện được gọi khi sự kiện /**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
4 được bắn.const Http = new XMLHttpRequest[];
const url='//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:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
5 có hai phương thức, /**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
6 và /**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
7 cho phép chúng tôi kiểm tra trạng thái yêu cầu của chúng tôi.Nếu
/**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
6 bằng 4, điều đó có nghĩa là yêu cầu được thực hiện. Tài sản /**
* Snippet Reference to:
* //api.jquery.com/jQuery.post/
**/
$.ajax[{
type: "POST",
url: "//192.168.1.250",
data: data,
success: function[] {
/** Some Code **/
}
}];
6 có 5 câu trả lời. Tìm hiểu thêm về nó ở đây.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='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
0 là phương thức jQuery. Tôi sẽ thảo luận về những điều đó bây giờ.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='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
1 và const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
2 để xử lý phản hồi nhận được.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='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
3 là một cách khác để đăng dữ liệu lên máy chủ. Phải mất ba tham số: const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
4, dữ liệu bạn muốn đăng và hàm gọi lại.$.getJSON
Phương pháp
const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
5 chỉ lấy dữ liệu ở định dạng JSON. Phải mất hai tham số: hàm const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
4 và một chức năng gọi lại.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='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
7, như đã thấy trong ví dụ dưới đây:tìm về
const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
8 là một API Web mạnh mẽ mới cho phép bạn thực hiện các yêu cầu không đồng bộ. Trên thực tế, const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
8 là một trong những cách tốt nhất và yêu thích của tôi để thực hiện yêu cầu HTTP. Nó trả về một lời hứa của người Viking, một trong những tính năng tuyệt vời của ES6. Nếu bạn không quen thuộc với ES6, bạn có thể đọc về nó trong bài viết này. Lời hứa cho phép chúng tôi xử lý yêu cầu không đồng bộ theo cách thông minh hơn. Hãy cùng xem cách thức hoạt động của const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
8 về mặt kỹ thuật.Hàm
const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
8 có một tham số bắt buộc: URL
2. Nó cũng có các tham số tùy chọn khác như trong ví dụ dưới đây:Như bạn có thể thấy,
const Http = new XMLHttpRequest[];
const url='//jsonplaceholder.typicode.com/posts';
Http.open["GET", url];
Http.send[];
Http.onreadystatechange = [e] => {
console.log[Http.responseText]
}
8 có nhiều lợi thế để thực hiện các yêu cầu HTTP. Bạn có thể tìm hiểu thêm về nó ở đây. Ngoài ra, trong Fetch có các mô -đun và plugin khác cho phép chúng tôi gửi và nhận yêu cầu đến và từ phía máy chủ, chẳng hạn như Axios.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à
5 để truy xuất và đăng dữ liệu từ máy chủ.GET:
6 có một tham số bắt buộc và cũng có thể lấy tham số tùy chọn thứ hai. Điều này lấy một số dữ liệu như một truy vấn đơn giản.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
7 trong
8Sau đó, 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ụ
9 và tiêm nó bên trong hàm tạo.Và trong
npm install axios --save
0 nhập npm install axios --save
1//import
import { FetchdataService } from './fetchdata.service';
Cuối cùng, gọi dịch vụ và chạy nó.
npm install axios --save
2Bạ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 -.
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu