Advanced learning of javascript and form forms

Introduction to JavaScript and form forms

In the previous article, the interaction between front and back-end data explained the relationship between Some browsers and servers in forms. It seems that the browser has mastered form, but the reality is cruel, in a recent project, we found that there is still a large piece of knowledge about form forms. In the previous article, I just clicked it. There are a lot of places to use this content, that is, file upload.

1. FormData

The method mentioned in the previous article is to use the serializeArray function of jquery, but this method is invalid for input [type = "file, in other words, it cannot integrate the content of the file into the form. For more information, see jquery's official issue: https://bugs.jquery.com/ticket/2656. The explanation is:

The serialize method can't get the contents of the file so I don't understand why it wowould need to serialize the file form field. you 'd have to use one of the Ajax File upload plugins to get the contents via AJAX.

Can we retrieve the submitted form without using the plug-in? Of course!

1.1. Role of FormData

This is the FormData we will introduce. According to the MDN explanation of FormData:

The FormData interface provides a simple way to construct key-value pairs to represent their fields and values, and can be easily sent to the server through 'xmlhttprequest. send. It uses the same format as the form encoding type to 'multipart/form-data.

The FormData object can use '... instead of using 'entries () ':' for (var p of myFormData) 'is equivalent to' for (var p of myFormData. entries ())'

This explanation makes me understand at least two points:

FormData can be used to process forms with multipart/form-data encoding types. Generally, forms with input [type = "file"] are used;

You can use for... in to check fields in FormData. (This object cannot be printed using console. log in the browser)

Then, some children's shoes will certainly ask:

Can I use FormData to submit a form without the input [type = "file"] type?

Use FormData to submit a form without the input [type = "file"] type, but what if x-www-form-urlencoded is used as the encoding type?

If FormData is not used, can I submit a form with input [type = "file?

Then we use demo to explain these two problems:

Yes. The encoding type is multipart/form-data, that is, the form submission method is roughly like this:

We can see that this encoding type of form is different. If the server uses express4 or a later version, you need to install additional middleware to process this type of requests. Otherwise, you will. body, req. param, req. no data in your form is found in the query. These will be discussed later. Therefore, we still do not advocate the use of this method to submit simple forms (this is true for most websites ):

You must have discovered that the form we submitted is simply a few characters, but with those boundary added, the form data becomes larger, that is to say, even the most efficient binary encoding takes longer than writing form data directly to the MIME header!

Tips: however, x-www-form-urlencoded is difficult to process when it is not a letter or number, because the browser will translate those non-alphanumeric characters into % HH, that is to say, each non-letter number will be replaced by three bytes, Which is unfriendly for a long form, so the emergence of multipart/form-data occurs.

To answer the second question, if so, we can see req. body in the server (express4:

{'------ WebKitFormBoundary5Kj2oSfHZKrZjYjs \ r \ nContent-Disposition: form-data; name ': '"user" \ r \ n \ r \ ndd \ r \ n ------ WebKitFormBoundary5Kj2oSfHZKrZjYjs \ r \ nContent-Disposition: form-data; name = "email" \ r \ n \ r \ nddd \ r \ n ------ WebKitFormBoundary5Kj2oSfHZKrZjYjs -- \ r \ n '}

Let's see, how do you let the server parse it ??? This simply adds congestion to yourself.

If you do not use FormData's haunted can also be submitted, you can use pure AJAX to achieve, detailed reference: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using XMLHttpRequest # Submitting forms and uploading_files

1.2 Conclusion

To sum up, when we use a form that contains input [type = "file"] or many non-alphanumeric characters, we need to use FormData to submit the form, the encoding type must be multipart/form-data. The general example is:

          
     Testing form group