前端基础 至 form表单提交方式

原文：https://www.jianshu.com/p/8c947e7fee00

虽然前后端不分离项目越来越少了（vue等太香）但是有时候后端程序员 想自己搞不分离web页面的时候还是会用原生html标签，复习一下form表单的提交，一共四种：

1 actice

<form action='http://www.123.com/postValue' method='post'>
     <input type='text' name='username'/>
     <input type='password' name='password'/>
     <input type='submit' value='登录'/> 
</form>

2 ajax

$('#documentForm').submitForm({
     url:"/Document/SubmitDocumentCreate",
      dataType:"text",
      callback:function(data){
          endFileUpload();
          data=eval("("+data+")");
          alert(data.Content);
          if(data.Result > 0){
               location.href = data.Redirect;
          }
     },
     before:function(){
          startFileUpload();
          var errMsg ="";
     }
}).submit();

3 需要设定form的enctype=“multipart/form-data”，并且添加
而且附件只能通过submit方法进行提交

<form method="POST" enctype="multipart/form-data">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
   <label>上传文件：</label> <input type="file" class="input_file"  name="uploadname">
</form>
         

4 js事件触发表单提交，通过button、链接等触发事件，js调用submit()方法提交表单数据，jquery通过submit()方法

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>

js: document.getElementById("form").submit();
jquery: $("#form").submit();