a标签href=“”的小坑

本文探讨了在HTML中使用a标签进行Ajax异步请求时遇到的问题。当href属性为空时,点击a标签会导致页面刷新,使得Ajax的success和error方法未执行。解决方案是将href设置为javascript:void(0)以阻止页面刷新。总结了防止此类问题的注意事项。
摘要由CSDN通过智能技术生成

首先我们先看看这个页面,其中“删除”是一个<a>标签

<a href="" class="delete" >删除</a>

 该标签有对应的js方法,当点击该链接,前端会执行一个Ajax请求,让服务器删除该条记录,删除后接收服务器返回的数据再显示处理结果。

正常的情况是,点击删除按钮,服务器处理完,显示“删除成功”。然而,实际调试的结果是点击删除按钮后,没有弹出任何警告窗口,直接刷新页面,而且,服务器已经收到数据,删除操作已经在服务器操作成功了!

我们来看看该点击事件的jQuery代码:

$(document).on("click",".delete", function() {
		var flag = confirm("确定要删除该问卷吗?(删除后不可恢复)");
		if(flag){
			//Ajax请求删除
			$.ajax({
				url: ajaxUrl,
				data: jsonDataString,
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
a标签的下载属性(downloads)可以用来指定下载文件的名称,但是它并不能保证所有浏览器都支持该属性。在某些浏览器中,特别是移动设备上的浏览器,点击a标签下载视频可能会直接打开视频而不是下载。为了解决这个问题,可以使用JavaScript来触发文件下载。你可以使用XMLHttpRequest对象来获取视频文件的二进制数据,然后使用FileSaver.js库中的saveAs函数将数据保存为文件并下载到本地。以下是一个示例代码: ```javascript export function downloadVideo(url) { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = () => { if (xhr.status === 200) { const blob = xhr.response; const fileName = 'video.mp4'; // 设置下载的文件名 saveAs(blob, fileName); // 使用FileSaver.js保存文件并下载 } }; xhr.send(); } function saveAs(blob, fileName) { if (window.navigator.msSaveOrOpenBlob) { // 兼容IE浏览器 window.navigator.msSaveOrOpenBlob(blob, fileName); } else { // 其他浏览器 const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(link.href); } } ``` 你可以调用`downloadVideo`函数并传入视频的URL来实现下载视频而不是直接打开。请注意,这个方法在某些浏览器上可能仍然无法正常工作,因为浏览器对于跨域下载的限制可能会导致下载失败。在这种情况下,你可能需要通过服务器端来提供视频文件的下载链接。 #### 引用[.reference_title] - *1* [js 使用a标签下载文件或打开后台返回的下载链接](https://blog.csdn.net/wh20141212/article/details/124607706)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [<a>标签下载download 浏览器打开文件或者下载文件的区别](https://blog.csdn.net/qiao_qiao_happy/article/details/117035187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [使用h5 <a>标签 href='url' download 下载踩过的坑](https://blog.csdn.net/yiyan12/article/details/80902945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值