From表单提交数据的几种方式

目录

1,Form表单的常用属性
2,浏览器提交表单时执行步骤
3,提交方法
4,常见的几种提交方式

form表单常用属性

action: url地址,服务器接收表单数据的地址
method: 提交服务器的http方法,一般为post和get,默认是get
name: name 属性的唯一性,规定表单的名称
enctype: 表单数据提交时使用的编码类型,默认使用"application/x-www-form-urlencoded",如果是使用POST请求,
则请求头中的content-type指定值就是该值.如果表单中有上传文件,编码类型需要使用"multipart/form-data"类型,
才能完成传递文件数据.

enctype为 form 表单数据的编码格式，Content-type为Http传输的数据的编码格式。分清两者

浏览器提交表单时执行步骤

1,识别出表单中表单元素的有效项（例如<input name="userName" ></input>标签中带有 name 属性的）,作为提交项
2,构建一个表单数据集
3,根据 form 表单中的 enctype 属性的值作为 content-type 对数据进行编码
4,根据 form 表单中的 action 属性和 method 属性向指定的地址发送数据

提交方法

1, get: 表单数据会被 encodeURIComponent 后以参数的形式: name1=value1&name2=value2附带在 url? 后面,再发送给服务器,并在 url 中显示出来
2, post: enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码，数据以键值对在http请求体重发送给服务器；如果enctype 属性为"multipart/form-data"，则以消息的形式发送给服务器"

常见的几种提交方式

• 无刷新页面提交表单

  表单可以实现无刷新页面提交，无需页面跳转。例子：

  通过一个隐藏的iframe实现，form表单的target设置为iframe的name名称，
  form提交目标为当前页面iframe则不会刷新页面。
  <form action="/yahui.com" method="post" target="targetIfr">
      <input type="text" name="name"/>
  </form>   
  <iframe name="targetIfr" style="display:none"></iframe> 
  (target属性用来设置窗口的打开)
  

• 通过type=submit提交

  一般表单提交通过type=submit实现，input type="submit"，浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/yahui.com

  <form action="/yahui.com" method="post">
      <input type="text" name="name" />
      <input type="submit" value="提交" />
  </form>
  

• js提交form表单

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

  <form id="form" action="/yahui.com" method="post" >
      <input type="text" name="name" />
      <input type="button" id="submission" value="提交" />
  </form>
  
  js:
      $("#submission").click({
          (可以添加数据的效验)
          $("#form").submit();
      })
  

• js获取表单数据后用ajax提交

在js中定义了其它变量，需要提交的时候携带，这时可以不用表单直接提交（此方法引用了jQuery插件）

##html
<form id="operatorEditForm" name="operatorEditForm">
  <div class="form-group">
    <label for="splitId">分润方编号：</label>
    <input type="text" class="form-control"  name="splitId" value="$!priceUnitDO.splitId" placeholder=""/>
  </div>
  <div class="form-group">
    <input type="button" class="btn btn-primary" id="submitButton" value="提交" style="width: 100px;"></input>
    <button class="btn btn-primary" id="close"  onclick="window.history.back(-1);">返回</button>
  </div>
</form>
##js
var intervalRateEdit = [ { fixRate: '', rangeFrom: '', rangeTo: '', id: '1' } ];
jQuery("#submitButton").click(function () {
        var b = {}
        var t = jQuery("#operatorEditForm").serializeArray()
        $.each(t, function() {
            b[this.name] = this.value;
        });
        if (b.strategyType === '2'){
            b.calRangeJson = intervalAmountEdit
        }
        console.log(b)
        // console.log(JSON.stringify(b))
        $.ajax({
            method: "post",
            data: b,
            url: "splitConfigAdd.htm",
            success: function (data) {
                if(data.error === 0){
                    alert('添加成功！')
                    window.history.back(-1);
                } else {
                    alert('提交失败！')
                }
            }
        })
    })