Làm cách nào để lấy dữ liệu POST từ URL trong JavaScript?

Hôm nay, Chúng tôi muốn chia sẻ với các bạn javascript post data lên url. Trong bài đăng này, chúng tôi sẽ cho bạn thấy json yêu cầu javascript http, hãy nghe url cuộc gọi javascript, chúng tôi sẽ cung cấp cho bạn bản demo và ví dụ để thực hiện. Trong bài đăng này, chúng ta sẽ tìm hiểu về Làm thế nào để nhiều URL trong một cuộc gọi Ajax?

Thực hiện các yêu cầu HTTP/Web trong JavaScript

nội dung

• Thực hiện các yêu cầu HTTP/Web trong JavaScript
  • Bài viết liên quan

ví dụ 1. javascript gửi yêu cầu bài viết

let members = {babyname: "jkpaysys"};

fetch("/post/members/lokdown", {
  method: "POST", 
  body: JSON.stringify(members)
}).then(res => {
  console.log("Good Luck Your Http Request complete! response:", res);
});


// If you are as lazy as me (or just prefer a shortcut/helper):

window.post = function(url, members) {
  return fetch(url, {method: "POST", body: JSON.stringify(members)});
}

// ...

post("post/members/lokdown", {element: "jkpaysys"});

ví dụ 2. phương thức đăng mã javascript

const postData = async ( url = '', members = {})=>{
    console.log(members);
      const response = await fetch(url, {
      method: 'POST', 
      credentials: 'same-origin',
      headers: {
          'Content-Type': 'application/json',
      },
     // Body members type must match "Content-Type" header        
      body: JSON.stringify(members), 
    });

      try {
        const freshlivecontent = await response.json();
        console.log(freshlivecontent);
        return freshlivecontent;
      }catch(error) {
      console.log("error", error);
      }
  }

ví dụ 3. sử dụng $. đăng javascript

//$.post with jQuery

$.post(
  "path/to/your/php/file", 
  {
    arguments1: "jkpaysys",
    arguments2: "subramanian swamy twitter"
},
  function(data) {
  //Callback here
  }
);

Ví dụ 4. javascript gửi dữ liệu bài đăng với ajax

function callHttpRequest (method, url, data) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if(method=="POST" && data){
        xhr.send(data);
    }else{
        xhr.send();
    }
  });
}

//POST example
var data={"person":"Virat","balance":98.25};
callHttpRequest('POST', "https://www.pakainfo.com/api.php?arguments1=krupali",data).then(function(data){
              var results=JSON.parse(data);
});

Tôi hy vọng bạn có ý tưởng về yêu cầu một dòng đối với bài đăng javascript.
Tôi muốn có phản hồi về infinityknow của mình. blog com.
Phản hồi, câu hỏi hoặc nhận xét có giá trị của bạn về bài viết này luôn được hoan nghênh.
Nếu bạn thích và thích bài đăng này, đừng quên chia sẻ.

Bài viết liên quan

1. Làm cách nào để giải mã dữ liệu JSON bằng jQuery/JavaScript?
2. Chuyển đổi dữ liệu CSV sang JSON bằng JavaScript với ví dụ
3. Đang tải dữ liệu JSON vào dữ liệu Highcharts từ Phản hồi JSON
4. javascript GET Tải dữ liệu từ tệp json
5. đối tượng javascript so với mảng so với kiểu dữ liệu JSON
6. Cách hiển thị dữ liệu json tên miền chéo bằng Jquery
7. cách trả về giá trị từ hàm thành công ajax trong javascript?
8. PHP JQuery Ajax Yêu cầu dữ liệu POST
9. WordPress Next Previous Article/post sử dụng CSS
10. Làm cách nào để đọc tệp văn bản trong từng dòng Javascript?

JavaScript Fetch API cung cấp giao diện đơn giản để tìm nạp tài nguyên. Đây là tiêu chuẩn mới nhất để xử lý các yêu cầu mạng trong trình duyệt

Ưu điểm chính của Tìm nạp API so với XMLHttpRequest(XHR) là trước đây sử dụng các lời hứa giúp làm việc với các yêu cầu và phản hồi dễ dàng hơn. Bạn không cần phải lo lắng về địa ngục cuộc gọi lại và mã soạn sẵn đi kèm với XHR

Kể từ ES7, Tìm nạp hiện được triển khai đầy đủ trong Chrome. Bạn thậm chí có thể sử dụng async-await và thoát khỏi những lời hứa

Làm cách nào để sử dụng Tìm nạp API?

Phương thức

<h1>GitHub Usersh1>
<ul id="users">ul>

0 có sẵn trong phạm vi toàn cầu của

<h1>GitHub Usersh1>
<ul id="users">ul>

1, với tham số đầu tiên là URL bạn muốn gọi. Theo mặc định, Fetch API tạo một yêu cầu GET

Một yêu cầu HTTP cơ bản với

<h1>GitHub Usersh1>
<ul id="users">ul>

0 sẽ như bên dưới

// `url` - the URL you want to call
fetch(url)
  .then(res => {
    // code to handle the response data
  })
  .catch(err => {
    // code to handle request errors
  })

Nhìn sạch sẽ và đơn giản?

Sử dụng Fetch API để GET dữ liệu

Để minh họa cách thức hoạt động của yêu cầu Tìm nạp GET, chúng tôi sẽ gọi API GitHub để truy xuất danh sách người dùng. Sau đó, chúng tôi sẽ sử dụng JavaScript để hiển thị người dùng trên trang web

Hãy bắt đầu với HTML. Chúng tôi chỉ cần một tiêu đề và một danh sách không có thứ tự

<h1>GitHub Usersh1>
<ul id="users">ul>

Trước khi chúng ta thực sự gọi phương thức

<h1>GitHub Usersh1>
<ul id="users">ul>

0, trước tiên chúng ta hãy lấy phần tử danh sách từ DOM nơi chúng ta sẽ đặt thông tin của người dùng

const postData = async ( url = '', members = {})=>{
    console.log(members);
      const response = await fetch(url, {
      method: 'POST', 
      credentials: 'same-origin',
      headers: {
          'Content-Type': 'application/json',
      },
     // Body members type must match "Content-Type" header        
      body: JSON.stringify(members), 
    });

      try {
        const freshlivecontent = await response.json();
        console.log(freshlivecontent);
        return freshlivecontent;
      }catch(error) {
      console.log("error", error);
      }
  }

0

Bây giờ, hãy thực hiện công việc thực tế — gọi Fetch API để lấy danh sách người dùng

const postData = async ( url = '', members = {})=>{
    console.log(members);
      const response = await fetch(url, {
      method: 'POST', 
      credentials: 'same-origin',
      headers: {
          'Content-Type': 'application/json',
      },
     // Body members type must match "Content-Type" header        
      body: JSON.stringify(members), 
    });

      try {
        const freshlivecontent = await response.json();
        console.log(freshlivecontent);
        return freshlivecontent;
      }catch(error) {
      console.log("error", error);
      }
  }

1

Phương thức

<h1>GitHub Usersh1>
<ul id="users">ul>

0 trả về một lời hứa gọi phương thức

<h1>GitHub Usersh1>
<ul id="users">ul>

5 với đối tượng phản hồi khi hoàn thành. Đối tượng phản hồi có một số phương thức để xử lý phản hồi theo cách chúng ta muốn. Dưới đây là một vài trong số các phương pháp này

• <h1>GitHub Usersh1>
  <ul id="users">ul>
  

  6 — Giải quyết lời hứa bằng đối tượng JSON

• <h1>GitHub Usersh1>
  <ul id="users">ul>
  

  7 — Giải quyết lời hứa bằng văn bản thuần túy

• <h1>GitHub Usersh1>
  <ul id="users">ul>
  

  8 — Giải quyết lời hứa với đối tượng Blob

• <h1>GitHub Usersh1>
  <ul id="users">ul>
  

  9 — Giải quyết các lời hứa với đối tượng FormData

Gọi bất kỳ phương thức nào ở trên đều trả về một lời hứa mới. Vì phản hồi API của chúng tôi là một chuỗi JSON, nên chuỗi chúng tôi muốn sử dụng là

<h1>GitHub Usersh1>
<ul id="users">ul>

6

const postData = async ( url = '', members = {})=>{
    console.log(members);
      const response = await fetch(url, {
      method: 'POST', 
      credentials: 'same-origin',
      headers: {
          'Content-Type': 'application/json',
      },
     // Body members type must match "Content-Type" header        
      body: JSON.stringify(members), 
    });

      try {
        const freshlivecontent = await response.json();
        console.log(freshlivecontent);
        return freshlivecontent;
      }catch(error) {
      console.log("error", error);
      }
  }

9

Tuyệt vời. Chúng ta đã hoàn thành phần yêu cầu Fetch API. Bây giờ là lúc để viết một số mã JavaScript vanilla. Hãy tạo hai hàm trợ giúp để nối và tạo các phần tử mới

//$.post with jQuery

$.post(
  "path/to/your/php/file", 
  {
    arguments1: "jkpaysys",
    arguments2: "subramanian swamy twitter"
},
  function(data) {
  //Callback here
  }
);

0

Bây giờ chúng ta có thể chuyển sang phân tích cú pháp đối tượng JSON và tạo và nối thêm các mục danh sách vào danh sách không có thứ tự của chúng ta

//$.post with jQuery

$.post(
  "path/to/your/php/file", 
  {
    arguments1: "jkpaysys",
    arguments2: "subramanian swamy twitter"
},
  function(data) {
  //Callback here
  }
);

1

Đoạn mã trên là tự giải thích. Chúng tôi lặp lại tất cả người dùng và đối với mỗi người dùng, chúng tôi tạo một mục danh sách, một hình ảnh và một khoảng. Chúng tôi cập nhật nguồn hình ảnh, đặt span text thành tên hiển thị của người dùng và sau đó nối chúng vào tên gốc của họ. Đó là nó

Đây là giao diện của trình duyệt (sau khi tôi đã thêm một số CSS từ Bootstrap)

Và mã đầy đủ của yêu cầu Tìm nạp của chúng tôi là như sau

//$.post with jQuery

$.post(
  "path/to/your/php/file", 
  {
    arguments1: "jkpaysys",
    arguments2: "subramanian swamy twitter"
},
  function(data) {
  //Callback here
  }
);

2

Sử dụng Fetch API để POST dữ liệu

Fetch API không chỉ giới hạn ở các yêu cầu GET. Bạn có thể thực hiện tất cả các loại yêu cầu khác (POST, PUT, DELETE, v.v. ) với tiêu đề yêu cầu tùy chỉnh và dữ liệu bài đăng. Đây là một ví dụ về yêu cầu POST

//$.post with jQuery

$.post(
  "path/to/your/php/file", 
  {
    arguments1: "jkpaysys",
    arguments2: "subramanian swamy twitter"
},
  function(data) {
  //Callback here
  }
);

3

Thay vì đối tượng theo nghĩa đen, chúng ta cũng có thể tạo một đối tượng yêu cầu với tất cả các tùy chọn và chuyển nó tới phương thức

<h1>GitHub Usersh1>
<ul id="users">ul>

0

Làm cách nào để nhận dữ liệu yêu cầu POST trong JavaScript?

Làm cách nào để lấy dữ liệu từ URL trong JavaScript?

Làm cách nào để gọi POST URL trong JavaScript?

Làm cách nào để nhận phản hồi POST trong JavaScript?