Sending forms through JavaScript[form提交 form data]

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

As in the previous article, HTML forms can send an HTTP request declaratively. But forms can also prepare an HTTP request to send via JavaScript. This article explores ways to do that.

A form is not always a form Section

With open Web apps, it's increasingly common to use HTML forms other than literal forms for humans to fill out — more and more developers are taking control over transmitting data.

Gaining control of the global interface Section

Standard HTML form submission loads the URL where the data was sent, which means the browser window navigates with a full page load. Avoiding a full page load can provide a smoother experience by hiding flickering and network lag.

Many modern UIs only use HTML forms to collect input from the user. When the user tries to send the data, the application takes control and transmits the data asynchronously in the background, updating only the parts of the UI that require changes.

Sending arbitrary data asynchronously is known as AJAX, which stands for "Asynchronous JavaScript And XML."

How is it different? Section

AJAX uses the XMLHttpRequest (XHR) DOM object. It can build HTTP requests, send them, and retrieve their results.

Note: Older AJAX techniques might not rely on XMLHttpRequest. For example, JSONP combined with the eval() function. It works, but it's not recommended because of serious security issues. The only reason to use this is for legacy browsers that lack support for XMLHttpRequest or JSON, but those are very old browsers indeed! Avoid such techniques.

Historically, XMLHttpRequest was designed to fetch and send XML as an exchange format. However, JSON superseded取代 XML and is overwhelmingly more common today.

But neither XML nor JSON fit into form data request encoding. Form data (application/x-www-form-urlencoded) is made of URL-encoded lists of key/value pairs. For transmitting binary data, the HTTP request is reshaped into multipart/form-data.

If you control the front-end (the code that's executed in the browser) and the back-end (the code which is executed on the server), you can send JSON/XML and process them however you want.

But if you want to use a third party service, it's not that easy. Some services only accept form data. There are also cases where it's simpler to use form data. If the data is key/value pairs, or raw binary data, existing back-end tools can handle it with no extra code required.

So how to send such data?

Sending form data Section

There are 3 ways to send form data, from legacy techniques to the newer FormData object. Let's look at them in detail.

1.Building an XMLHttpRequest manually

XMLHttpRequest is the safest and most reliable way to make HTTP requests. To send form data with XMLHttpRequest, prepare the data by URL-encoding it, and obey the specifics of form data requests.

Note: To learn more about XMLHttpRequest, these articles may interest you: An introductory article to AJAX and a more advanced tutorial about using XMLHttpRequest.

Let's rebuild our previous example:

<button type="button" onclick="sendData({test:'ok'})">Click Me!</button>

As you can see, the HTML hasn't really changed. However, the JavaScript is completely different:

function sendData(data) {
  var XHR = new XMLHttpRequest();
  var urlEncodedData = "";
  var urlEncodedDataPairs = [];
  var name;

  // Turn the data object into an array of URL-encoded key/value pairs.
  for(name in data) {
    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  }

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

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

  // Define what happens in case of error
  XHR.addEventListener('error', function(event) {
    alert('Oops! Something goes 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);
}

Note: This use of XMLHttpRequest is subject to the same origin policy if you want to send data to a third party web site. For cross-origin requests, you'll need CORS and HTTP access control.

2.Using XMLHttpRequest and the FormData object Section

Building an HTTP request by hand can be overwhelming. Fortunately, a recent XMLHttpRequest specification provides a convenient and simpler way to handle form data requests with the FormData object.

The FormData object can be used to build form data for transmission, or to get the data within a form element to manage how it's sent. Note that FormData objects are "write only", which means you can change them, but not retrieve their contents.

Using this object is detailed in Using FormData Objects, but here are two examples:

3.Building a DOM in a hidden iframeSection

The oldest way to asynchronously send form data is building a form with the DOM API, then sending its data into a hidden <iframe>. To access the result of your submission, retrieve the content of the <iframe>.

Dealing with binary data Section

If you use a FormData object with a form that includes <input type="file"> widgets, the data will be processed automatically. But to send binary data by hand, there's extra work to do.

There are many sources for binary data on the modern Web: FileReader, Canvas, and WebRTC, for example. Unfortunately, some legacy browsers can't access binary data or require complicated workarounds. Those legacy cases are out of this article's scope. If you want to know more about the FileReader API, read Using files from web applications.

Sending binary data with support for FormData is straightfoward. Use the append() method and you're done. If you have to do it by hand, it's trickier.

In the following example, we use the FileReader API to access binary data and then build the multi-part form data request by hand: