jquery 提交 表单

有时提交到后台的action不能用ajax(比如导出excel时),这时只能用表单方式提交。

 

$("#exceBtnl").click(function(){
		var frm = $("<form></form>");
		frm.attr('action', '/showcase-app/exportToExcel.action');
		frm.attr('method', 'post');
		
		frm.appendTo('body');
		frm.css('display', 'none');
		frm.submit();
		frm.remove();
	});

 

其实就是用jquery建一个临时的form,用它来post到一个action,之后再将这个form删除。

使用 jQuery 提交表单有同步和异步两种常见方式: ### 同步提交表单 同步提交会使页面跳转至表单 `action` 属性指定的地址。以下是示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 同步表单提交</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm" action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"> <br> <button id="submitBtn">提交</button> </form> <script> $(document).ready(function() { $('#submitBtn').click(function() { $('#myForm').submit(); }); }); </script> </body> </html> ``` 在上述代码中,为按钮绑定 `click` 事件,点击按钮时调用 `$('#myForm').submit()` 方法提交表单。 ### 异步提交表单(AJAX) 异步提交不会使页面跳转,而是在后台与服务器交互。以下是示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 异步表单提交</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm" action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"> <br> <button id="submitBtn">提交</button> </form> <div id="result"></div> <script> $(document).ready(function() { $('#submitBtn').click(function(e) { e.preventDefault(); // 阻止表单默认提交行为 var formData = $('#myForm').serialize(); // 序列化表单数据 $.ajax({ url: $('#myForm').attr('action'), type: $('#myForm').attr('method'), data: formData, success: function(response) { $('#result').text('提交成功: ' + response); }, error: function(error) { $('#result').text('提交失败: ' + error.statusText); } }); }); }); </script> </body> </html> ``` 在这个例子中,点击按钮时先阻止表单的默认提交行为,然后使用 `serialize()` 方法序列化表单数据,最后通过 `$.ajax()` 方法将数据异步发送到服务器,并根据响应结果显示相应信息。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值