前端提交数据/访问后端的几种方式：Ajax，form，触发，window.open()

最新推荐文章于 2023-08-23 23:46:25 发布

原创最新推荐文章于 2023-08-23 23:46:25 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

24 篇文章

订阅专栏

本文介绍了表单提交的不同方式，包括直接提交、Ajax交互及Form+Ajax混合使用的方法，并探讨了不同事件触发机制下的表单操作技巧。

一：form表单提交-button submit触发

表单中除了数据填写插件还含有确定键、取消键和重置键，点击提交键可以将表单内容，表单内容可以是一般内容，也可以是图片等媒体内容。

action等属性也可以放在js中，一般使用onsubmit来进行验证。

<form id name action method enctype onsubmit >
</form>

1.属性

method="..." post/get

οnsubmit="return check();"

enctype 属性可能的值：application/x-www-form-urlencoded、multipart/form-data、text/plain

input type="..." submit、reset......

2.提交方式：直接提交和外部提交

input submit键直接提交

intput button onclick function(){document.getElementById("id").submit();} 或者 $（“#id”）.submit();

二：Ajax-function内，button/href触发

url = parent.formateUrl（"..."）

url="<c:url value=' ... ' />"

dataType : json、text...

error:function（）{ }

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: function(data){},
  dataType: dataType
});

$.post(url,data,success(data, textStatus, jqXHR),dataType)

三：Form+Ajax-button submit触发

<form id name action method enctype onsubmit >
    <input type="button" onclick="fun();">submit</input>
</form>

以下在function fun(){}中

1.可以在JavaScript中给form添加属性

$（"#id"）.attr("action",parent.formatUrl（"..."）)

2.使用ajaxSubmit提交数据：jQuery

var option={
	type："post",
	dataType："json",
	success：function(data){
	
	}
}

$（"#id"）.ajaxSubmit（option）

四：触发方式：多种事件触发方式

1.<a href>链接访问：<a href='javascript:void(0)'>…</a>

2.<button>onclick访问：点击触发

3.onblure：焦点检测

4.<form>：onsubmit：内容检测

keyup触发

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

五：其他访问方式

1.datagrid带参发送

2.window.open(parent.formateUrl（"...","_self"）);下载文件时使用