点击<a>页面跳转解决办法/跨域请求，JSONP

最新推荐文章于 2024-08-07 16:43:40 发布
最新推荐文章于 2024-08-07 16:43:40 发布
阅读量502 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/cndotabestdota/p/5778879.html

有些时候做的东西刚好要用到链接,但又不需要去链接,只需要对onclick事件进行处理,但它却这样子写 <a href="#" οnclick="gettext()">点击</a> 当点击"点击"两个文字时,页面就会跳动.怎样使页面不跳动呢? 


方法一:<a href="###" οnclick="gettext()">点击</a> 

方法二:<a href="javascript::" οnclick="gettext()">点击</a> 

方法三:<a href="javascript:void(0);" οnclick="gettext()">点击</a>

javascript:是伪协议，表示url的内容通过javascript执行。
void(0)表示不作任何操作，这样会防止链接跳转到其他页面。
这么做往往是为了保留链接的样式，但不让链接执行实际操作，具体的操作交给链接的onclick事件处理

而我之前自己把<a>的href属性删掉也可以欸。

select 的选中问题用val()就可以搞定，不用改变他的select属性

 

 

处理 JSON 出现错误Uncaught SyntaxError: Unexpected token :

下面简单说下原因。

使用 Ajax 获取 json 时，存在跨域限制，不能这样调用；而 jsonp 实际是请求一个 script，然后允许里面的代码。

使用 jsonp 方式，但返回结果确实 json，自然出错，无法运行

【原创】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

 

用nginx的反向代理机制解决前端跨域问题

转载于:https://www.cnblogs.com/cndotabestdota/p/5778879.html

html超链接跨域名跳转,Cypress web自动化20-a标签超链接跨域问题
weixin_39595430的博客
06-03 988
前言cypress 上默认访问一个跨域的网页会出现异常：Cypress detected a cross origin error happened on page loadA cross origin error happens when your application navigates to a new URL which does not match the origin policy ...
a标签在同源html中跳转,前端面试必备之同源和跨域详解
weixin_30464195的博客
06-04 919
前言众所周知浏览器的同源策略及跨域的方法在前端面试中也是出场率极高的问题，本文主要跟大家分享了关于前端面试时会遇到的同源和跨域问题，下面话不多说了，来一起看看详细的介绍吧。什么是同源策略同源策略是用来限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，是一种用于隔离潜在的恶意文件的关键的安全机制。何谓同源如果协议、域名和端口对于两个页面来说是相同的，则这两个页面就是同源的。比如：htt...
JSONP跨域实现百度下拉搜索跳转
Mr_Baoge的博客
04-15 674
效果如上图 点击时跳转。 以下附上整个界面的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ paddin...
＜a/＞标签超链接在本页面跳转至外部网页
听风动的博客
03-08 971
<a/>标签超链接在本页面跳转至外部网页 <a href="http://192.168.2.120:1500/search/doc?userCoode=dengru" style="color:white;font-size:14px;">全文检索</a>
cas ajax+jsonp+iframe 实现无页面跳转
liu306487103的博客
08-16 731
1.客户端 html代码 head>     meta charset="utf-8">     title>title> head> script data-main="script/main" src="script/require.js">script> script type="text/javascript">
我在JavaScript编程中遇到了报错，我的原始代码如下：// 页面加载后初始化 $(document).ready(function() { // 登录表单提交 $('#loginForm').submit(function(e) { e.preventDefault(); $.ajax({ url: '/api/login', method: 'POST', data: { username: $('input[type="text"]').val(), password: $('input[type="password"]').val() }, success: function(response) { // 跳转到主界面 window.location.href = 'dashboard.html'; } }); }); // 导航菜单切换 $('.nav-list li a').click(function(e) { e.preventDefault(); let target = $(this).attr('href'); // 移除所有active状态 $('.nav-list li').removeClass('active'); $(this).parent().addClass('active'); // 加载对应内容 loadContent(target.substring(1)); }); }); // 动态加载内容 function loadContent(pageType) { let urlMap = { 'unprocessed': '/api/faults', 'statistics': '/api/statistics', 'management': '/api/management' }; $.get(urlMap[pageType], function(data) { let template = ''; switch(pageType) { case 'unprocessed': template = buildFaultTable(data); break; case 'statistics': template = buildChart(data); break; case 'management': template = buildManagementPanel(data); break; } $('#contentContainer').html(template); }); } // 构建故障表格 function buildFaultTable(data) { let html = `<table class="fault-table"> <thead> <tr> <th>序号</th> <th>故障类别</th> <th>级别</th> <th>地点</th> <th>发生时间</th> </tr> </thead> <tbody>`; data.forEach((item, index) => { html += `<tr class="${item.level === '一级' ? 'urgent' : ''}"> <td>${index + 1}</td> <td>${item.type}</td> <td>${item.level}</td> <td>${item.location}</td> <td>${new Date(item.time).toLocaleString()}</td> </tr>`; }); html += `</tbody></table>`; return html; }
05-29
<think>好的，我现在需要解决用户关于JavaScript jQueryAJAX报错的问题。用户之前提到遇到了404和406错误，还涉及到JSON解析的问题。首先，我得回忆一下常见的AJAX错误类型以及对应的解决方案。首先，404错误通常...
伪静态，跨域请求JSONP、CORS
weixin_54685622的博客
04-10 567
1 拦截静态资源.html 1.1 业务分析 通常情况下,需要获取商品信息时,一般采用都是restFul风格, {itemId}.html 要求后端服务器应该拦截.html为结尾的请求即可. 1.2 以.html结尾的优势 如果网站页面 以.html为结尾的请求,则该页面更加容易被搜索引擎记录. 通过搜索引擎提高网站的曝光率.搜索引擎工作原理: 1.3 后台服务器拦截策略 1.默认条件下后台服务器只拦截前缀型请求. 2.如果在浏览器中写入index.html 则后台服务器认为,请求的是一个具体的静态页面
Web前端——跨域问题
emgexgb_sef的博客
03-06 454
目录 1.跨域问题 2.为什么要跨域？ 演示跨域问题 3.利用jsonp进行跨域 演示jsonp跨域 演示用jQuery的方式发送jsonp请求 简化方法发送jsonp 4.用cros进行跨域 cros跨域演示 5.proxy模式简介 1.跨域问题 什么是跨域? 首先,现代浏览器为了安全,做了一个同源限制. 也就是所谓的同源安全策略. 本质上,其实是不存在所谓的跨不跨域的. 把浏览器想象成一个发送网络请求的软件. 按照道理来说,请求都是可以发送出去的. 但是在 w
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>百度联想词搜索框</title> <link rel="stylesheet" href=""> <style type="text/css"> * { padding: 0; margin: 0; } .content { position: absolute; margin-left: -260px; left: 50%; top: 30%; } #btn { width: 560px; padding: 10px 10px; border: 1px solid rgb(45, 129, 240); } #oUl,#oUl > li{ list-style: none; } #oUl a { text-decoration: none; color: rgb(45, 129, 240); } </style> </head> <body> <div class="content"> <input type="text " id="btn"> <ul id="oUl"> </ul> </div> <script type="text/javascript"> btn.onkeyup = function () { var value = this.value; if (value) { var oScript = document.createElement('script'); oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa' document.body.appendChild(oScript); oScript.remove();//大家在之前会发现，随着你输入的东西越多，你创建的script标签就越多，我们在获取到它后直接移除即可。 } else if(value == 0){ oUl.style.display = 'none'; } } function aa(data) { oUl.style.display = 'block'; var list = data.s; var str = ''; if (list.length > 0) { list.forEach(function (ele, index) { str += '<li><a href ="https://www.baidu.com/s?wd=' + ele + '">' + ele + '</li>'; }) oUl.innerHTML = str; }else { oUl.style.display = 'none'; } } </script> </body> </html>
最新发布
06-18
}</style></head><body><divclass="autoComplete"><h2>仿百度联想词</h2><div><inputtype="text"id="autoComplete"style="width:300px;"></div><divid="autoCompleteList"></div></div><script>//获取元素varinput=...
我的文章列表一地址为https://fcw66.xyz/?thread-1.htm 其中后缀是文章地址二为https://fcw66.xyz/?thread-2.htm 请把下面这个代码绑定到我这个论坛上 这样我就能实现不用后台也可以更新这个代码的文章列表了<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简约文章列表</title> <style> /* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; } body { background: #f5f5f5; padding: 40px 20px; } /* 容器样式 */ .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 3px 15px rgba(0,0,0,0.1); padding: 30px; } /* 标题样式 */ .title { text-align: center; color: #333; margin-bottom: 30px; font-size: 24px; } /* 文章列表项 */ .article-item { padding: 18px 25px; margin: 10px 0; background: #fff; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: all 0.3s; font-size: 16px; } .article-item:hover { transform: translateX(5px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #007bff; } /* 分页容器 */ .pagination { display: flex; justify-content: center; margin-top: 30px; gap: 8px; } /* 分页按钮 */ .page-btn { padding: 8px 14px; border: none; background: #f8f9fa; border-radius: 6px; cursor: pointer; transition: all 0.2s; color: #333; } .page-btn.active { background: #007bff; color: white; } .page-btn:hover:not(.active) { background: #e9ecef; } </style> </head> <body> <div class="container"> <h1 class="title">文章列表</h1> <!-- 文章列表 --> <div id="articleList"></div> <!-- 分页按钮 --> <div class="pagination" id="pagination"></div> </div> <script> // 模拟数据（实际使用时替换为真实数据） const allArticles = Array.from({length: 25}, (_, i) => ({ id: i+1, title: `第 ${i+1} 篇文章 - ${'示例标题文本示例标题文本'.slice(0, 15)}` })); let currentPage = 1; const itemsPerPage = 10; // 初始化 function init() { renderArticles(); renderPagination(); } // 渲染文章列表 function renderArticles() { const start = (currentPage - 1) * itemsPerPage; const end = start + itemsPerPage; const currentArticles = allArticles.slice(start, end); const html = currentArticles.map(article => ` <div class="article-item"> ${article.title} </div> `).join(''); document.getElementById('articleList').innerHTML = html; } // 渲染分页按钮 function renderPagination() { const totalPages = Math.ceil(allArticles.length / itemsPerPage); let buttons = ''; for(let i=1; i<=totalPages; i++) { buttons += ` <button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})"> ${i} </button> `; } document.getElementById('pagination').innerHTML = buttons; } // 切换页面 function changePage(page) { currentPage = page; renderArticles(); renderPagination(); } // 初始化加载 init(); </script> </body> </html>
03-20
<think>好的，我需要帮用户解决如何将提供的HTML代码绑定到他的论坛文章列表页面上，实现无后台更新。首先，我需要理解用户的需求。用户有两个文章列表地址，分别是thread-1.htm和thread-2.htm，它们可能对应不同的...
a标签在同源html中跳转,【基础】Html跨域跳转问题整理
weixin_39710003的博客
06-04 448
$(function(){$('#send').click(function(){$.ajax({type: "GET",url: "http://localhost:PageB/",data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data...
点击a标签打开新页面遇到的跨域问题
joan_yb的博客
08-07 417
点击a标签打开新页面遇到的跨域问题
a href点击无效_Cypress web自动化20跨域问题a标签超链接
weixin_30823465的博客
12-29 818
前言cypress 上默认访问一个跨域的网页会出现异常：Cypress detected a cross origin error happened on page loadA cross origin error happens when your application navigates to a new URL which does not match the origin po...
a 标签解决，新窗口打开跨域问题
hijk7的博客
06-23 593
a 标签解决，新窗口打开跨域问题
a标签新窗口打开，解决跨域问题
Yetian_2000的博客
09-16 2080
标签在新窗口打开属性：target="_blank" 标签解决跨域属性：rel=“nofollow noreferrer” <a href="https://xxxx.vip/home" rel="nofollow noreferrer" target="_blank">新窗口打开</a> [参考
用来跳转的＜a＞ 标签，原来还有这么多强大又实用的功能
邓占勇的博客
07-29 2146
说到标签，对于一个前端开发来说应该算是最基础的标签之一了，绝大多数情况都是用来做链接跳转，使用href 配置跳转地址，再设置 target="_blank"在新标签页打开。但是标签的功能远远不止于此，它可以实现很多看似复杂的功能，例如：SEO优化、无感刷新主页面、PV统计、避免重复打开新窗口等。
两个html之间跳转 确定点,两个跨域页面进行跳转传参的终极方案
weixin_32676101的博客
06-08 2101
本文约定：A页面：跳转前的原来页面，假设为http://a.comB页面：将要跳转的目标页面，假设为http://b.com一、简单方案说到页面跳转，首先想到的就是用a标签：// 在A页面点击链接，并将参数data传到B页面// 在B页面接收A页面传过来的参数var data = window.location.href.split("?")[1].split("=")[1];还可以使用windo...
前端常见跨域解决方案（全）
weixin_34281537的博客
09-13 2330
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@f...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值