Jquery实现创建表单并主动触发提交事件,并实现回调,由此实现下载文件功能
时间: 2024-03-20 16:42:09 浏览: 53
jquery.scrollIntoView:滚动元素进入视图时触发回调
5星 · 资源好评率100%
可以使用以下代码来实现创建表单、提交表单并下载文件:
```javascript
// 创建表单元素
var form = $('<form></form>');
// 设置表单属性
form.attr('method', 'POST');
form.attr('action', 'your-url-here');
// 创建表单项
var input1 = $('<input>').attr('type', 'hidden').attr('name', 'input1').val('value1');
var input2 = $('<input>').attr('type', 'hidden').attr('name', 'input2').val('value2');
// 将表单项添加到表单中
form.append(input1);
form.append(input2);
// 将表单添加到文档中
$('body').append(form);
// 提交表单
form.submit(function(event) {
event.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(response) {
// 创建一个隐藏的 <a> 元素,并设置下载链接
var a = $('<a></a>');
a.attr('href', response.file_url);
a.attr('download', response.file_name);
// 将 <a> 元素添加到文档中,并模拟点击
$('body').append(a);
a[0].click();
// 移除 <a> 元素
a.remove();
}
});
});
```
在这段代码中,我们创建了一个表单元素,并设置了表单的属性。然后我们创建了两个隐藏的表单项,并将它们添加到表单中。接着我们将表单添加到文档中,并使用 `form.submit()` 方法来提交表单。在提交表单的回调函数中,我们使用了 jQuery 的 `$.ajax()` 方法来发送 AJAX 请求,并在请求成功后创建一个隐藏的 `<a>` 元素,并设置下载链接。然后我们将这个 `<a>` 元素添加到文档中,并模拟点击,从而触发文件下载。最后我们移除这个 `<a>` 元素。
阅读全文