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中可见:
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 中。 |