前端提交

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请求方式

=数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。