2021-08-08

ajax 表单提交

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

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提交无限制 https://www.w3school.com.cn/tags/html_ref_httpmethods.asp 5.GET为form表单的默认提交方式 6.GET方式获取数据后，刷新不会有负面的影响， 因为它只是获取数据， POST数据被重新提交可能会产生不良的后果 (浏览器应该告知用户数据会被重新提交) 7.数据类型的限制：GET只允许ASCII字符,POST则 无限制(如果提交二进制数据(例如:图片)，需要使用POST方法) 手动提交表单数据 function getData() { var name = $("#txtname").val(); var sex = $("#cboSex").val(); var address = $("#txtAddress").val(); if (name != " " && sex != " ") { $("#frm").attr("action", "/Main/GetData"); $("#frm").attr("methed", "post"); $("#frm").submit(); } else { alert("输入值不能为空") } } function getData() { 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("输入值不能为空") } } 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("表单填写的数据不能为空，请检查"); } } function postData() { var name = $("#txtName").val(); var sex = $("#cboSex").val(); var address = $("#txtAddress").val(); if (name != "" && sex != 0 && address != "") { //var form = document.getElementById("frm"); //form.action = "/Main/GetData"; //form.method = "post"; //form.submit(); $("#frm").attr("action", "/Main/GetData"); $("#frm").attr("method", "post"); $("#frm").submit(); } else { alert("表单填写的数据不能为空，请检查"); } }