form表单提交

 

form表单提交：

 

第一form表单提交的相关知识：

form表单的属性：

【action与method】 

  属性          值                     描述

  action      URL         规定当提交表单时向何处发送表单数据

  method    get/post     规定用于发送form-data的HTTP方法。(提交表单的方式) 

 

URL可能的值：

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

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

 

  

get/post区别：

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

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

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

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

https://www.w3school.com.cn/tags/html_ref_httpmethods.asp

第五GET为form表单的默认提交方式

第六GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据， POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)

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

 

 

第二form表单提交的方式：

第一种get方式手动提交数据

        //手动提交表单数据
        function getData() {
            var name = document.getElementById("txtName").value;
            var sex = document.getElementById("cboSex").value;
            var address = document.getElementById("txtAddress").value;
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                form.action = "/Main/GetData";
                form.method = "get";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }
        }

 

 

注释：

1. 用到javaScript的声明变量获取到ID选择器。
2. If语句判断如果某些元素为空或为零则需要提示用户重新填写反之执行下去。
3. 获取到表单的ID选择器使用属性“action”“method”获取到位置以及方式。
4. 使用手动提交submit()方法。

 

 

 

第二种POST手动提交数据

function postData() {
            var name = $("#txtName").val();
            var sex = $("#cboSex").val();
            var address = $("#txtAddress").val();
            if (name != "" && sex != 0 && address != "") {
                $("#frm").attr("action", "/Main/GetData");
                $("#frm").attr("method", "post");
                $("#frm").submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }     
        }

 

注释：

1. 使用到jQuery声明变量获取到ID选择器。
2. If语句判断如果某些元素为空或为零则需要提示用户重新填写反之执行下去。
3. 使用attr() 方法设置或返回被选元素的属性值，获取到表单的ID选择器使用属性“action”“method”获取到位置以及方式。
4. 使用手动提交submit()方法。