Form表单的运用

最新推荐文章于 2022-05-10 17:02:02 发布

MorningLight_LQ

最新推荐文章于 2022-05-10 17:02:02 发布

阅读量189

点赞数

分类专栏：小案例

本文链接：https://blog.csdn.net/MorningLight_LQ/article/details/117377999

版权

小案例专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Form表单提交方式分为手动和自动，自动提交会有一些小的缺陷，所有这里就不说了，说手动提交的两种不同方法，但原理一样。这里的手动提交是使用JavaScript，不适宜使用jQuery，因为当你使用禁用自动提交的时候它会把我们写的手动方法也一起禁用，具体原因我还不明确，有知道的大佬可以在评论区留言，十分感谢！

原理概念：获取输入值，做判断（判断输入内容是否为空，是否为乱码）再用用手动方式添加action ， method属性给form标签并赋值。

form表单的属性action 与method
属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get/post	规定用于发送form-data的HTTP方法。(提交表单的方式)
<form action="/Form00/getData" method="post"></form>

URL可能的值：

绝对 URL - 指向其他站点（比如 src="www.baidu.com"）

相对 URL - 指向站点内的文件（比如 src="/Form00/getData"）

method的值 get/post的区别与特点：

get提交时参数直接暴露在URL上。

(W3School上给出的区别：)

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

get/post区别：

1.GET方法是用来向服务器上获取数据，而PSOT是用来向服务器上传递修改数据。

2.GET将表单里的数据添加到action所指向的URL后面，并且两者之间使用”?”连接而各个变量之间使用"&"连接;PSOT是将表单中的数据放在form的数据体(FormData)中，按照键值对的方式，传递到所指向的action

3.GET是不安全的，因为在传输过程中，数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据，POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中

4.GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交无限制

5.GET为form表单的默认提交方式

6.GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，

POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)

数据类型的限制：GET只允许ASCII字符,POST则无限制(如果提交二进制数据(例如:图片)，需要使用POST方法)

手动提交的四种方法：

/Main/Add 通过形参接受数据 post get 都可以使用
/Main/postDataByFormCollection 通过FormCollection来接收数据 post可以使用
通过 Request.Form["name的属性值"]获取表单数据
EntityClass实体类接收数据 post get 都可以使用

源代码以及相对应的在控制器接受方法如下：

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

@*οnsubmit="return false;" 禁用表单提交方式*@

</div>

</select>

</div>

</div>

<button class="btn btn-outline-success" type="button" id="get" @*οnclick="Data(get)"*@ onclick="getData()">GET提交</button>

<button class="btn btn-outline-success" type="button" id="post" @*οnclick="Data(post)"*@ onclick="postData()">POST提交</button>

<button class="btn btn-outline-danger" type="reset">Reset重置</button>

</form>

</div>

//手动提交表单数据

function postData() {

var name = document.getElementById("inputPassword").value;

var sex = document.getElementById("cboSex").value;

var address = document.getElementById("txtAddress").value;

if (name != "" && sex != 0 && address != "") {

var form = document.getElementById("frm");

//1./Main/Add 通过形参接受数据 post get 都可以使用

//form.action = "/Main/Add";

//2./Main/postDataByFormCollection 通过FormCollection来接收数据 post可以使用

//form.action = "/Main/postDataByFormCollection";

//3.通过 Request.Form["name的属性值"]获取表单数据 post可以使用

//form.action = "/Main/postDataByRequest";

//4.EntityClass实体类接收数据 post get 都可以使用

form.action = "/Main/getDataByEntityClass";

form.method = "post";

form.submit();

} else {

alert("表单填写的数据不能为空，请检查");

}

};

function getData() {

var name = document.getElementById("inputPassword").value;

var sex = document.getElementById("cboSex").value;

var address = document.getElementById("txtAddress").value;

if (name != "" && sex != 0 && address != "") {

var form = document.getElementById("frm");

//1./Main/Add 通过形参接受数据 post get 都可以使用

//form.action = "/Main/Add";

//4.EntityClass实体类接收数据 post get 都可以使用

form.action = "/Main/getDataByEntityClass";

form.method = "get";

form.submit();

} else {

alert("表单填写的数据不能为空，请检查");

}

};

</script>

</body>

</html>

MorningLight_LQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Form表单的运用

Form表单提交方式分为手动和自动，自动提交会有一些小的缺陷，所有这里就不说了，说手动提交的两种不同方法，但原理一样。这里的手动提交是使用JavaScript，不适宜使用jQuery，因为当你使用禁用自动提交的时候它会把我们写的手动方法也一起禁用，具体原因我还不明确，有知道的大佬可以在评论区留言，十分感谢！原理概念：获取输入值，做判断（判断输入内容是否为空，是否为乱码）再用用手动方式添加action，method属性给form标签并赋值。 form表单的属性action 与...
复制链接

扫一扫