前端提交

1.提交方式

1.1、通过表单提交

这是HTML支持最传统的提交方法，需要创建表单，然后表单包含各种类型的表单元素，还要有一个提交按钮，通过提交按钮来提交到后台，这种方式提交后页面会刷新。

<!--表单提交-->
<form name=”form” method=”post” action=”#”>
    <input type=”button” name=”query”  onclick=”query();”  value=”查询”>
    <input type=”button” name=”update” onclick=”update();” value=”更新”>
    <input type=”submit” name=”submit” value=”提交”>
</form>

//JavaScript 单击事件提交
$("#按钮id值").click(function () {
    //重置表单
    $("#formNoticeType")[0].reset();
    
    //设置模态框标题
    $("#modalNoticeTypeTitle").text("模态款标题");//模态款的标题

    //设置表单的action
    $("#formNoticeType").prop("action", "路径");

    //弹出模态框
    $("#modalNoticeType").modal({ backdrop: 'static', keyboard: false });
});

2、通过网页链接提交

可以在网页的链接附上需要提交的参数，当用户点击链接后，浏览器发起向链接的访问，从而也把链接附带的参数提交到后台，这种方式提交后页面也会刷新。

<a href="samp/window.html" target="window_name">
    开一个新窗口!
</a> 

3、通过ajax提交

Javascript支持ajax方式创建HTTP请求，可以通过在HTML页面元素的事件处理函数中创建ajax请求，在url参数里携带所需提交的参数，从而提交到后台，这种方式提交后页面不会刷新。

3.1 JSON.stringify形式传参

属性和方法：
type:类型，“POST"或"GET”,默认值为"GET"；
url:发送请求的地址；
async:设置异步，(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，那么请将此选项设置为 false。注意：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
Data：是一个对象，连同请求发送到服务器的数据。
dataType：是预期服务器返回的数据类型。如果前面不指定类型，那么jQuery将自动根据http包MIME信息来进行智能判断。一般我们采用json格式，可以设置为"json"。
success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串。
error:是一个方法,请求失败是调用此函数,传入XMLHttpRequest对象。

<script language=javascript>
    $.ajax({
       url: Path + "/addOrgUpdate",
       //OrgSurvey.OrgSurveyData为一个对象
       data: JSON.stringify(OrgSurvey.OrgSurveyData),
       type: "post",
       contentType: "application/json", //必须有
       dataType: "json", //表示返回值类型，不必须
       success: function (data) {
           if (data.code === 0) {
               Aexit.success("信息保存成功!");
               location.replace(location);
               layer.closeAll('dialog');
               $("#button2").show();
               $("#button1").hide();
           } else {
               Aexit.error(data.message);
           }
       }
})
</script>

3.2 post请求方式提交

<script language=javascript>
    //提交信息
    $.ajax({
        url: Path + "/auditOrgInfo",
        data: {"orgId": orgId, 
       		   "result": result, 
       		   "failReason": failReason},
        type: "post",
        dataType: "json", //表示返回值类型，不必须
        success: function (data) {
            if (data.code === 0) {
                Aexit.success("审核通过!");
                window.parent.tableRefresh();
                window.parent.closeLayer();
            } else {
                Aexit.error("提交失败！" + data.message + "!");
            }
        }
    });
</script>

3.3 @PathVariable用法

使用@PathVariable接收参数，参数值需要在url进行占位，前端传参的URL：

url = “${ctx}/edit/${Id}/${name}”

3.4 get请求方式

<script language=javascript>
    //提交信息
    $.ajax({
        url: Path + "/final_file",
        type: "GET",
        cache: false,
        data: {
            serialNo: serialNo,
            orgId: orgId
        },
        success: function (data) {
            if (data.code === 0) {
                Aexit.success("审核通过!");
                window.parent.tableRefresh();
                window.parent.closeLayer();
            } else {
                Aexit.error("提交失败！" + data.message + "!");
            }
        }
    });
</script>

 

在实际Web页面中，我们要根据实际用户交互的需要来选择合适的提交方式。

1、如果需要使用一些的表单类型用户输入，比如文本框、单选框、下拉框，那么可以选择第1种和第3种方式，如果希望提交后页面刷新就选第1种，如果不希望提交后页面刷新就选第3种。

2、如果不需要表单类型输入，那么可以选择第2种和第3种方式，如果希望提交后页面刷新就选第2种，如果不希望提交后页面刷新就选第3种。

 

如果一个表单里有需要有多个提交按钮怎么办呢？
比如一个表单里的提交按钮所指向的处理页面不同，这样由于表单在定义的时候就已经确定下表单数据的处理页面，所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。
首先定义一个函数：

<script language=javascript>
function query(){
    form.action=”query.php”;
    form.submit();
}
function update(){
    form.action=”update.php”;
    form.submit();
}
</script>

通过javascript改变form的action属性值，这样就可以实现多提交按钮而且功能不同了，页面内代码如下：

<form name=”form” method=”post” action=”#”>
    <input type=”button” name=”query” onclick=”query();” value=”查询”>
    <input type=”button” name=”update” onclick=”update();” value=”更新”>
</form>

2. 常见的前端提交数据方式

2.1 Get方式 放在URL中

这种方式我们直接是把请求的参数放在URL中，参数值URL中可见：

https://www.baidu.com/s?wd=tets&rsv_spt=1&rsv_iqid=0xb343812e0083a195&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=5&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&inputT=876&rsv_sug4=1754

 2.2 Post方式 常用表单方式（application/x-www-form-urlencoded）

        之所以说这种方式是默认的是因为你在使用ajax提交数据的时候如果不指定的话就会默认采用这种形式。当然，这种方式的特点就是将所有的数据变成键值对的形式存放在Request的Body中。但是需要说明的是，这种方式是不支持文件上传的。

2.3 Post方式 支持文件上传（multipart/form-data）

        这种方式需要强调的一点就是它支持文件的上传，这个是非常重要的。当然，要使用这种格式的话，你必须注意解析的方式。其将会把窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。也就是说，如果有 type=file 的话，就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。

2.4  Post方式 json提交（application/json）

        这种方式就是在ajax提交的时候，在type上注明application/json。这样的话就会把你所提交的信息吧变成json提交上去。

 

2.5 Post和Get方式的区别

   

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。