form表单有大知识

form标签属性：

1.action：规定当提交表单时向何处发送表单数据，其值为后端提供的一个URL地址，这个地址专门负责接收表单提交过来的数据。

若form表单未指定action属性，则action的默认值为当前页面的URL地址。当提交表单后，页面会立即跳转到action属性指定的URL地址。

2.target：规定在何处打开 action URL。

_blank：在新窗口打开；

_self：默认值，在相同的框架中打开；

_parent：在父框架中打开；_top：在整个窗口中打开；

framename：在指定的框架中打开。

3.method：规定用于发送表单数据的 HTTP 方法。

get：默认值，表示通过URL地址的形式，把表单提交到actionURL，长度是有限的（大约 3000 字符）；

post：将表单数据附加到 HTTP 请求的 body 内，没有长度限制。

4.accept：规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）。

application/x-www-form-urlencoded：默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）；

multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

text/plain：将空格转换为 "+" 符号，但不编码特殊字符。

表单的同步提交及缺点：

缺点：1.页面会发生跳转；2.页面之前的状态和数据会丢失

解决方案：表单只负责采集数据，使用Ajax将数据提交到服务器

使用seralize()函数时，必须为表单的每个元素添加name属性

 当前端无法解决跨域，又需要发送请求时，可以通过表单提交来解决

        let url=`http://abcd`
        let params = {
          pwdaToken:assetToken,
          acctId:localStorage.getItem('acctId'),
          userName:localStorage.getItem('username')
        }

         //原生方法
        var tempForm = document.createElement("form");
        tempForm.id = "tempForm1";
        tempForm.method = "post";
        tempForm.action = url;
        //tempForm.target = "_blank"; //打开新页面
        for(var key in params){
          var hideInput = document.createElement("input");
          hideInput.type = "hidden";
          hideInput.name = key; //参数名
          hideInput.value = params[key]; //实际参数值
          tempForm.appendChild(hideInput);
        }
        if (document.all) {
            tempForm.attachEvent("onsubmit", function () { });        //IE
        } else {
            var subObj = tempForm.addEventListener("submit", function () { }, false);    //firefox
        }
        document.body.appendChild(tempForm);
        if (document.all) {
            tempForm.fireEvent("onsubmit");
        } else {
            tempForm.dispatchEvent(new Event("submit"));
        }
        tempForm.submit();
        document.body.removeChild(tempForm);
          }
        })

        //jQuery方法
        var newWin = window.open();
        var form = $("<form method='post'></form>"), input;
        form.attr({
            "action" : url
        });
        $.each(params, function(key, value) {
            input = $("<input type='hidden'>");
            input.attr({"name" : key});
            input.val(value);
            form.append(input);
        });
        form.appendTo(newWin.document.body);
        form.submit();