Hướng dẫn can you submit forms using javascript? - bạn có thể gửi biểu mẫu bằng javascript không?

Một biểu mẫu không phải lúc nào cũng là một hình thức

Với các ứng dụng web tiến bộ, các ứng dụng trang đơn và các ứng dụng dựa trên khung, thông thường sử dụng các biểu mẫu HTML để gửi dữ liệu mà không tải tài liệu mới khi nhận được dữ liệu phản hồi. Trước tiên hãy nói về lý do tại sao điều này đòi hỏi một cách tiếp cận khác.

Đạt được quyền kiểm soát giao diện toàn cầu

Đệ trình biểu mẫu HTML tiêu chuẩn, như được mô tả trong bài viết trước, tải URL nơi dữ liệu được gửi, có nghĩa là cửa sổ Trình duyệt điều hướng với tải toàn trang. Tránh tải toàn trang có thể cung cấp trải nghiệm mượt mà hơn bằng cách tránh độ trễ mạng và các vấn đề trực quan có thể xảy ra như nhấp nháy.

Nhiều UI hiện đại chỉ sử dụng các biểu mẫu HTML để thu thập đầu vào từ người dùng và không phải để gửi dữ liệu. Khi người dùng cố gắng gửi dữ liệu, ứng dụng sẽ kiểm soát và truyền dữ liệu không đồng bộ trong nền, chỉ cập nhật các phần của UI yêu cầu thay đổi.

Gửi dữ liệu tùy ý không đồng bộ thường được gọi là AJAX, là viết tắt của "JavaScript và XML không đồng bộ"."Asynchronous JavaScript And XML".

Nó khác biệt như thế nào?

Đối tượng DOM

$hidden_forum = '

    
    
';

$hidden_forum = '

    
    
';

$hidden_forum = '

    
    
';

$hidden_forum = '

    
    
';

Lưu ý: API tìm nạp thường được sử dụng thay cho XHR ngày nay - đây là phiên bản hiện đại, cập nhật của XHR, hoạt động theo cách tương tự nhưng có một số lợi thế. Hầu hết các mã XHR bạn sẽ thấy trong bài viết này có thể được trao đổi để tìm nạp. The Fetch API is often used in place of XHR these days — it is a modern, updated version of XHR, which works in a similar fashion but has some advantages. Most of the XHR code you'll see in this article could be swapped out for Fetch.

Nếu bạn kiểm soát phần cuối (mã được thực thi trong trình duyệt) và phần cuối (mã được thực thi trên máy chủ), bạn có thể gửi JSON/XML và xử lý chúng theo cách bạn muốn.

Nhưng nếu bạn muốn sử dụng dịch vụ bên thứ ba, bạn cần gửi dữ liệu theo định dạng mà các dịch vụ yêu cầu.

Vậy làm thế nào chúng ta nên gửi dữ liệu như vậy? Các kỹ thuật khác nhau bạn sẽ yêu cầu được thực hiện dưới đây.

Gửi dữ liệu biểu mẫu

Có 3 cách để gửi dữ liệu biểu mẫu:

• Xây dựng một

  $hidden_forum = '
  
      
      
  ';
  

  4 theo cách thủ công.
• Sử dụng một đối tượng độc lập

  
  Forum
  

  0.
• Sử dụng

  
  Forum
  

  0 liên kết với phần tử

  
  Forum
  

  2.

Hãy nhìn vào họ một cách chi tiết.

Xây dựng một xmlhttprequest theo cách thủ công

$hidden_forum = '

    
    
';

$hidden_forum = '

    
    
';

Hãy xem xét một ví dụ:

<button>Click Me!button>

Và bây giờ JavaScript:

const btn = document.querySelector('button');

function sendData(data) {
  console.log('Sending data');

  const XHR = new XMLHttpRequest();

  const urlEncodedDataPairs = [];

  // Turn the data object into an array of URL-encoded key/value pairs.
  for (const [name, value] of Object.entries(data)) {
    urlEncodedDataPairs.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
  }

  // Combine the pairs into a single string and replace all %-encoded spaces to
  // the '+' character; matches the behavior of browser form submissions.
  const urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

  // Define what happens on successful data submission
  XHR.addEventListener('load', (event) => {
    alert('Yeah! Data sent and response loaded.');
  });

  // Define what happens in case of error
  XHR.addEventListener('error', (event) => {
    alert('Oops! Something went wrong.');
  });

  // Set up our request
  XHR.open('POST', 'https://example.com/cors.php');

  // Add the required HTTP header for form data POST requests
  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // Finally, send our data.
  XHR.send(urlEncodedData);
}

btn.addEventListener('click', () => {
  sendData({ test: 'ok' });
})

Đây là kết quả trực tiếp:

Sử dụng xmlhttprequest và đối tượng formData

Xây dựng một yêu cầu HTTP bằng tay có thể là quá sức. May mắn thay, đặc tả XMLHTTPREQUEST cung cấp một cách mới hơn, đơn giản hơn để xử lý các yêu cầu dữ liệu biểu mẫu với đối tượng

Forum

Đối tượng

Forum

Sử dụng đối tượng này được chi tiết trong việc sử dụng các đối tượng FormData, nhưng đây là hai ví dụ:

Sử dụng một đối tượng formdata độc lập

<button>Click Me!button>

Bạn nên quen thuộc với mẫu HTML đó. Bây giờ cho JavaScript:

const btn = document.querySelector('button');

function sendData(data) {
  const XHR = new XMLHttpRequest();
  const FD = new FormData();

  // Push our data into our FormData object
  for (const [name, value] of Object.entries(data)) {
    FD.append(name, value);
  }

  // Define what happens on successful data submission
  XHR.addEventListener('load', (event) => {
    alert('Yeah! Data sent and response loaded.');
  });

  // Define what happens in case of error
  XHR.addEventListener('error', (event) => {
    alert('Oops! Something went wrong.');
  });

  // Set up our request
  XHR.open('POST', 'https://example.com/cors.php');

  // Send our FormData object; HTTP headers are set automatically
  XHR.send(FD);
}

btn.addEventListener('click', () => {
  sendData({ test: 'ok' });
});

Đây là kết quả trực tiếp:

Sử dụng xmlhttprequest và đối tượng formData

Xây dựng một yêu cầu HTTP bằng tay có thể là quá sức. May mắn thay, đặc tả XMLHTTPREQUEST cung cấp một cách mới hơn, đơn giản hơn để xử lý các yêu cầu dữ liệu biểu mẫu với đối tượng

Forum

Đối tượng

Forum

<form id="myForm">
  <label for="myName">Send me your name:label>
  <input id="myName" name="name" value="John" />
  <input type="submit" value="Send Me!" />
form>

Sử dụng đối tượng này được chi tiết trong việc sử dụng các đối tượng FormData, nhưng đây là hai ví dụ:

window.addEventListener("load", () => {
  function sendData() {
    const XHR = new XMLHttpRequest();

    // Bind the FormData object and the form element
    const FD = new FormData(form);

    // Define what happens on successful data submission
    XHR.addEventListener("load", (event) => {
      alert(event.target.responseText);
    });

    // Define what happens in case of error
    XHR.addEventListener("error", (event) => {
      alert('Oops! Something went wrong.');
    });

    // Set up our request
    XHR.open("POST", "https://example.com/cors.php");

    // The data sent is what the user provided in the form
    XHR.send(FD);
  }

  // Get the form element
  const form = document.getElementById("myForm");

  // Add 'submit' event handler
  form.addEventListener("submit", (event) => {
    event.preventDefault();

    sendData();
  });
});

Đây là kết quả trực tiếp:

Sử dụng xmlhttprequest và đối tượng formData

Xử lý dữ liệu nhị phân

Nếu bạn sử dụng đối tượng

Forum

<button>Click Me!button>

Có nhiều nguồn cho dữ liệu nhị phân, bao gồm

<button>Click Me!button>

<button>Click Me!button>

<button>Click Me!button>

Cách gửi dữ liệu nhị phân ít phức tạp nhất là sử dụng phương pháp

<button>Click Me!button>

Trong ví dụ sau, chúng tôi sử dụng API

<button>Click Me!button>

<form id="theForm">
  <p>
    <label for="theText">text data:label>
    <input id="theText" name="myText" value="Some text data" type="text" />
  p>
  <p>
    <label for="theFile">file data:label>
    <input id="theFile" name="myFile" type="file" />
  p>
  <button>Send Me!button>
form>

Như bạn thấy, HTML là một

Forum

$hidden_forum = '

    
    
';

Đây là kết quả trực tiếp:

Sự kết luận

Tùy thuộc vào trình duyệt và loại dữ liệu bạn đang xử lý, việc gửi dữ liệu biểu mẫu qua JavaScript có thể dễ dàng hoặc khó khăn. Đối tượng

Forum

Xem thêm

Con đường học tập

Chủ đê nâng cao