For.html projects, add placeholder.js after introducing jquery to the page you need
Since I’m a vue+elementUI project, I don’t refresh the browser every time I switch menus, so I’ve cleaned up the usage in vUE
Jquery file also needs to be introduced here, otherwise the error may be reported. Just introduce jquery in index.html

Here’s how to use it in a Vue
First create placeholder.js file in the public JS file and output a PlaceholderInit function

//Solve the problem that the placeholder of input is not displayed under ie.

export function PlaceholderInit() {
  return jQuery(function() {
    var placeholderfriend = {
      focus: function(s) {
        s = $(s)
          .hide()
          .prev()
          .show()
          .focus();
        var idValue = s.attr("id");
        if (idValue) {
          s.attr("id", idValue.replace("placeholderfriend", ""));
        }
        var clsValue = s.attr("class");
        if (clsValue) {
          s.attr("class", clsValue.replace("placeholderfriend", ""));
        }
      }
    };

    //Determine if placeholder support is available.
    function isPlaceholer() {
      var input = document.createElement("input");
      return "placeholder" in input;
    }
    //Unsupported Codes
    if (!isPlaceholer()) {
      $(function() {
        var form = $(this);
        var elements = form.find("input[type='text'][placeholder]");
        elements.each(function() {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (pValue) {
            if (sValue == "") {
              s.val(pValue);
            }
          }
        });

        elements.focus(function() {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (sValue && pValue) {
            if (sValue == pValue) {
              s.val("");
            }
          }
        });

        elements.blur(function() {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (!sValue) {
            s.val(pValue);
          }
        });

        var elementsPass = form.find("input[type='password'][placeholder]");
        elementsPass.each(function(i) {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (pValue) {
            if (sValue == "") {
              var html = this.outerHTML || "";
              html = html
                .replace(
                  /\s*type=(['"])?password\1/gi,
                  " type=text placeholderfriend"
                )
                .replace(/\s*(?:value|on1[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")
                .replace(
                  /\s*placeholderfriend/,
                  " placeholderfriend value='" +
                    pValue +
                    "' " +
                    "οnfοcus='placeholderfriendfocus(this);' "
                );
              var idValue = s.attr("id");
              if (idValue) {
                s.attr("id", idValue + "placeholderfriend");
              }
              var clsValue = s.attr("class");
              if (clsValue) {
                s.attr("class", clsValue + "placeholderfriend");
              }
              s.hide();
              s.after(html);
            }
          }
        });

        elementsPass.blur(function() {
          var s = $(this);
          var sValue = s.val();
          if (sValue == "") {
            var idValue = s.attr("id");
            if (idValue) {
              s.attr("id", idValue + "placeholderfriend");
            }
            var clsValue = s.attr("class");
            if (clsValue) {
              s.attr("class", clsValue + "placeholderfriend");
            }
            s.hide()
              .next()
              .show();
          }
        });
      });
    }
    window.placeholderfriendfocus = placeholderfriend.focus;
  });
}

Deconstruct PlaceholderInit function
on pages that need to display placeholders

import { PlaceholderInit } from '@/utils/placeholder'

Call this function before the page is displayed, so that the place where the current page needs to display placeholders will display
when the page comes in

PlaceholderInit();

If the input page of a new pop-up box needs to display placeholders, the function

will also be called when the new pop-up box is opened

If the request parameter supplied when requesting the interface is of type FormData, we can divide the operation into two ways.
The method in FormData()
0, append() append value
1, set() modify value
2, getAll() get all check box values
3, get() get radio box values
1. Ajax encapsulated by jQuery
If the request parameter is formdata, must set two configuration items
processData: false
contentType: false

  $.ajax({
            url: 'Interface Address',
            type: "POST",
            data: fd,
            success: function(res){

            },
            processData: false, //do not convert data request data (the object format is automatically converted to string format on request)
            contentType: false // do not set request header (FormData comes with request header)
        })

2. Native Ajax manipulation
If the request parameter is FormData, then post-style Ajax requests no longer need to set the request header

FormData:
	var form = $("form")[0];	//Converting jq objects to DOM objects (must be DOM objects)
	var fd = new FormData(form);
	
	
Native ajax:
 		var xhr = new XMLHttpRequest();
        xhr.open('POST', '/common/post'). xhr.onload = function () { var xhr.open('POST', '/common/post');
        xhr.open('POST', '/common/post'); xhr.onload = function () {
            console.log(this.response); // output the result
        }
        xhr.send(fd); //pass the data from the form to the backend