当前位置:首页 > Web开发 > 正文

form表单submit提交内容,跟ajax异步提交form表单的区别,

2024-03-31 Web开发

因为开发一个小细节,本来是上传文件,填写文件名进行ajax提交,但是没有获取到文件的绝对地址,

所以使用了form表单提交文件,,然后又觉得form表单+ajax提交联系起来比较好,不用改动太多代码。

区别:

Form表单提交:一般都会进行页面跳转;

Ajax异步提交:可以不进行页面跳转;

Form表单提交

<body>

<div id="forms”>

<form id="form1" action="/users/login" method="post">

<p>用户名:<input name="userName" type="text" id="userName" value="" /></p>

<p>密 码:<input name="password" type="password" id="password" value="" /></p>

<p><input type="submit" value="确认">&nbsp<input type="reset" value="重置"></p>

</form>

</div>

</body>

用form表单的action和method来确定提交到的地址和提交的方式;

点击确认按钮会触发form表单的提交事件,数据传输到后端,然后由servlet后台控制页面跳转以及数据传递。

Ajax实现form提交方式:

<body>

<div id="forms">

<form id="form1">

<p>用户名:<input name="userName" type="text" id="userName" value="" /></p>

<p>密 码:<input name="password" type="password" id="password" value="" /></p>

<p><input type="button" id="btn" value="登录">&nbsp<input type="reset" value="重置"></p>

</form>

</div>

<script type="text/javascript">

$("#btn").click(function () {

$.ajax({ 

type: "POST",      //提交的方法

url:"/user/login", //提交的地址 

data:$("#form1").serialize(), //序列化表单值输出

async: false

error: function(request) {  //失败的话

alert("提交失败 error"); 

}, 

success: function(data) {  //成功

alert(data);  //就将返回的数据显示出来

window.location.href="跳转页面" 

});

}); 

</script>

</body>

总结:

在常用方式中,点击的登录按钮的type为“submit”类型,form表单的action不为空;

在ajax方式中要注意$.ajax方法中的参数:dataTyp和data属性的设置。而且要添加id属性;

form表单submit提交内容,跟ajax异步提交form表单的区别,

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/40261.html