Form form

Responsible for data collection function

Three components

  • The form tag

    • HTML is the form tag, which is a “container” that delimits a specified area on the page as a form area
    • The three most important attributes

  • Form fields

    • Form fields provide a channel to collect user information. Common form fields include input, Textarea, select, and so on

  • A form button

    • When the form data is filled in, the user clicks the form button to trigger the form submission operation and submit the collected data to the server

JQuery’s serialize() function

  • JQuery’s serialize() function retrieves data collected in a form at once
  • $(‘ form element selector ‘).serialize()
  • When you use the serialize() function to quickly retrieve form data, you must add the name attribute to each form field
  • The result of this method is a query string structure: name=value&name=value
  • This method gets the value of a hidden field
  • This method does not get a value for the disabled state
  • This method does not get the file information in the file field, so it cannot complete the file upload

The alias of the axios request method

  • axios.get(url[, config])

  • axios.delete(url[, config])

  • axios.post(url[, data[, config]])

  • axios.put(url[, data[, config]])

  • axios.patch(url[, data[, config]])

  • Experience using axios.get()

 axios
          .get('http://www.itcbc.com:3006/api/getbooks', {
            // params: the key can only write params
            params: { id: 11778 }
          })
          .then(result= > {
            console.log(result)
          })
Copy the code

Axios Global configuration & Interceptor

Global configuration request root path

  • Axios.defaults. baseURL = ‘Request root path’
// Configures the base path (base address), which is automatically concatenated before the URL, unless the URL is an absolute path
axios.defaults.baseURL = 'http://www.itcbc.com:3006'
Copy the code

Interceptors are used to globally intercept every axiOS request and response

  • Some of the repetitive business code in each request can be wrapped in an interceptor to improve code reuse

  • Use interceptor – to achieve loading effect

/ Add response interceptor// Response: response, so the response goes through the interceptor
axios.interceptors.response.use(
  // The handler for the successful response
  function(response) {
    // What to do with the response data
    document.querySelector('.loading').style.display = 'none'
    return response
  },
  // The handler for the failed response
  function(error) {
    // Do something about the response error
    document.querySelector('.loading').style.display = 'none'
    return Promise.reject(error)
  }
Copy the code

FormData and file upload

  • FormData is a browser object. Used to manage form data.

  • Ie 10 + support.

  • FormData works like serialize() in jQuery to quickly collect FormData

And you can submit the created FormData object directly to the interface.

  • Typical application scenario: FormData + Ajax technology to achieve file upload function

  • Basic usage

// 1. Get the DOM object of the form tag
let form = document.querySelector('form');
// 2. Instantiate the FormData object and pass in the form
let fd = new FormData(form);
// 3. Submit data
axios.post('/api/formdata', fd).then(result= > {
    console.log(result);
})

Copy the code

  • Each form element is required to have a name attribute

  • FormData API method

append('key'.'value'); Append a data set to an object'key'.'value'); -- Modifies the data in the objectdelete ('key'); Delete data from object get('key'Getkey getAll(getKey getAll('key'ForEach () -- walks through the data in the objectCopy the code
  • Profile picture Uploading Case

      let iptFile = document.querySelector('#iptFile')
      // The event triggered after the user selects the file: change
      iptFile.addEventListener('change'.function() {
        // console.log(iptfile.value) cannot be retrieved
        // console.log($('form').serialize())) returns empty string values
        // Use formData to obtain the file data selected by the user. Only formData can be used for file data
        let form = document.querySelector('form')
        let fd = new FormData(form)
        console.log(fd.get('avatar'))})Copy the code

Difference between FormData and serialize

  • Thing in common:

    • You need to set the name attribute of each form item.
    • Can quickly collect form data
    • Can get the value of input type=”hidden” in the hidden field
    • Cannot get the value of the disabled state

  • The difference between

    • FormData is native code; Serialiaze is a jQuery wrapper
    • FormData can collect file fields (), while serialize cannot. If there are file uploads, FormData must be used.
    • The data type of the result is different

File domain supplement

Input type=”file”

  • Accept property: Controls which file types can be selected, such as Accept =”image/ PNG,image/ JPEG”

  • Multiple property: Controls whether multiple files can be selected

The file object

  • File objects do not need to be created and can be obtained from file domains
  • Select one or more files
  • Based on the file field, find its files property. The Files property is a pseudo-array that contains one or more file objects.
  • Get file object
        // files: a list of all files of the current user (pseudo-array), in which each value is a file object
        let myfile = iptFile.files[0]
Copy the code

  • One of the role

    • Local preview
      // createObjectURL: You can store the file object data in memory and return the storage address (path) in memory.
        // let url = url.createObjecturl (file object)
        let myurl = URL.createObjectURL(myfile)
        thumb.src = myurl
Copy the code

  • The second part

    • Append to FormData to implement file upload
  let fd = new FormData()
        // Appent appends parameters to formData. The value can be of any type
        fd.append('avatar', myfile)
Copy the code

Request message & response message

The request message

  • What format does the request message specify for the client to send data to the server

  • In browsers, GET requests are special in that they have only the request header, not the request body
  • In browsers, POST, PUT, PATCH, and DELETE requests have both a header and a body

The response message

  • What format does the response message specify in which the server responds to the data to the client

  • The five commonly used request methods can all carry the request parameters after the URL.
  • Because the URL length is limited, the request parameters are generally small, such as file upload cannot be done

Commonly used request physique

  • /api/xxx? Parameter = value & parameter = value (Strings of this format are called query strings, so such parameters are called query parameters)

// the second argument to axios.post, directly using the query string
axios.post('/api/xxx'.'key=value&key=value')
Copy the code

  • / API/XXX/value/value

// the second argument to axios.post uses the object. Axios will convert it to JSON format
axios.post('/api/xxx', { id: 1.name: 'zs' })

Copy the code
  • New FormData() (FormData object format
let fd = new FormData();
// the second argument to axios.post directly uses the FormData object
axios.post('/api/formdata', fd)
Copy the code