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?

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ụ:

Click Me!

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', '//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

Click Me!

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', '//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

  Send me your name:
  
  

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", "//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

Click Me!

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

Click Me!

Click Me!

Click Me!

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

Click Me!

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

Click Me!

  
    text data:
    
  
  
    file data:
    
  
  Send Me!

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