vue-resource的使用 之 this.$http.jsonp实现跨域请求（仿360搜索）

最新推荐文章于 2024-07-22 17:47:15 发布
最新推荐文章于 2024-07-22 17:47:15 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： 前端学习 vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43816826/article/details/120642803
版权
本文通过vue-resource的jsonp方法，演示了如何实现类似360搜索引擎的跨域查询功能。详细介绍了所需源码和关键文件，包括Vue组件和资源导入。
摘要由CSDN通过智能技术生成

使用vue-resource提供的jsonp()方法实现跨域请求。此案例模仿实现360搜索引擎的查询效果。

仿360搜索

实现效果

请添加图片描述

源码

使用到的文件（3个）:
1.vue.js
2.vue-resource.js
(上面两个文件需要自己本机存在才能运行源码，注意导入的路径。如果本地没有，可以使用相关的https://…在线链接引入，官网都有。)
3.360搜索列表.html(如下)

360搜索列表.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
     
				new Vue({
     
					el:'div',
					data:{
     
						searchTxt:'',
						dataList:[],
						nowSelected:-1,
						text:''
					},
					methods:{
     
						/**
						 * 每一次输入查询的内容都进行模糊查询，并显示相关条目
						 */
						search(e)<
最低0.47元/天 解锁文章
酸橙派SVT
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-resource中的跨域资源请求
wunianisme的博客
04-20 946
跨域AJAX 早期，由于浏览器的安全策略，AJAX只能在同域情况下发送成功。但是目前很多浏览器已经开始支持XMLHttpRequest2。XMLHttpRequest2引入了大量的新特性，例如跨域资源请求（CORS）、上传进度事件、支持二进制数据上传/下载等。 现在我们来了解一下vue-resource中用到的CORS特性和XMLHttpRequest2的替代品XDomainRequest。 XM...
vue-resource的$http.jsonp方法例子
weixin_42667381的博客
04-21 2679
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
VUE使用jsonp的形式发送跨域请求
最新发布
weixin_47276069的博客
07-22 146
【代码】VUE使用jsonp的形式发送跨域请求。
VUE使用this.$http.jsonp报错Uncaught in promise Response
qq_36639517的博客
07-09 4522
VUE使用this.$http.jsonp报错Uncaught in promise Responsejsonp请求原理VUE代码jsonp请求请求结果错误原因 jsonp请求原理 浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就...
WEB前端：vuejs全家桶（13）：使用vue-resource发送跨域请求、
weixin_43731793的博客
11-07 249
1、使用vue-resource发送跨域请求 3. 使用vue-resource发送跨域请求 #### 3.1 安装vue-resource并引入 cnpm install vue-resource -S #### 3.2 基本用法 使用this.$http发送请求 this.$http.get(url, [options]) th...
vue访问本地php,如何使用vue请求本地json
weixin_42497772的博客
03-11 244
这次给大家带来如何使用vue请求本地json，使用vue请求本地json的注意事项有哪些，下面就是实战案例，一起来看一下。在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require('portfinder')后添加const express = require('express')const app = express()const ...
Vue-resource实现ajax请求和跨域请求示例
08-31
Vue-resource是Vue.js框架的一个插件，主要用于实现AJAX（异步JavaScript和XML）请求和处理跨域问题，从而方便前后端的数据交互。Vue-resource提供了与jQuery中的$.ajax类似的功能，使得开发者能够轻松地向服务器...
Vue2.0 vue-source jsonp 跨域请求
10-19
总结来说，这篇文章主要讲解了如何在Vue2.0项目中使用已经废弃的vue-resource插件来实现jsonp跨域请求，以解决浏览器的同源策略限制。尽管当前最流行的HTTP客户端库是axios，学习了解jsonp技术在某些特定场景下依然...
基于vue-resource jsonp跨域问题的解决方法
11-28
最近在学习vue.js 碰到个ajax跨域请求的问题，之前知道可以用jsonp解决，但是一直没实践过，这次用发现里面好多问题，所以现在记录下来，希望可以给刚接触使用jsonp的同学一点帮助！ 关于什么是jsonp，以及为什么要...
vue-resource ajax跨域,Vue-resource实现ajax请求和跨域请求
weixin_42097914的博客
08-05 215
vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。在使用时，首先需要安装vue-resource插件1.在项目跟目录上安装：npm install vue-resource2.引入resource插件import VueResource from 'vue-resource';Vue.use(VueResource)3.发送请求：t...
vue 跨域配置解决方案
11-14
1、在使用vue开发的时候经常要涉及到跨域的问题，其实在vue cli中是有我们设置跨域请求的文件的。 2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } 将target设置为我们需要访问的域名。 3、然后在main.js中设置全局属性： Vue.prototype.HOST = '/api' 4、至此，我们就可以在全局使用这个域名了，如下： var url = this.HOST + '/movie/in_theaters' this.$http.get(url).then(res => { this.movieList = res.data.subjects; },res => { console.info('调用失败'); });
java中处理vue.js跨域问题
03-16
java中处理vue.js跨域问题，把文件放在扫描目录下即可。
VUE2.0中Jsonp的使用方法
10-18
使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以参考下
详解如何在Vue项目中发送jsonp请求
12-13
起因 公司临时要支撑河南的一个项目，做一个单点登录的功能。 简单来说，就是以下3步 客户方点击某个按钮进入我们的页面a 在页面a中由前端发送一个jsonp请求到客户方，得到一个token值 前端得到token值后向自己后端发送一个请求，后端根据token去redis(token的值就是redis里的key)里取值(key=token的值，value=用户信息等)判断用户是否已登陆，若登陆则根据取到的工号等信息后端模拟登陆，若没有登陆，则跳转到客户方登陆页面 怎么做 发送jsonp请求，axios官方貌似并不支持，所以排除:woman_gesturing_NO_light_skin_tone: 经过辗转Google，发现了*vue-json
$http.jsonp跨域获取Java后台Servlet 数据
全栈软件工程师-陈征峰的博客
03-29 2580
angular如何跨域到Java的servlet获取数据
自己动手，为vue写一个jsonp的方法
weixin_34361881的博客
01-06 229
Fetch 提供了对Request和Response（以及其他与网络请求有关的）对象通用的定义。它之后能够被使用到很多场景中：service workers、Cache API、其他处理请求和响应的方式，甚至任何需要生成自己的响应的方式。 众所周知，fetch提供的请求资源的方法并不包括jsonp，但是我们又想像使用fetch那样...
关于vue-resource 跨域请求的异常处理方法
ZML19800214的博客
07-27 528
当你启动一个vue项目时，项目会运行在一个webpack的服务上，所以此时去访问其他端口或者是其他地址时，属于跨域请求，故会报异常。 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 当出现此异常...
this.$http.后面各类每一个具体用途
06-12
这是在 Vue.js 中使用第三方插件 Vue-resource 或者 Axios 发送 HTTP 请求的常见用法。`$http` 是在 Vue 根实例中创建的 HTTP 客户端对象，可以使用它的各种方法来发送不同类型的 HTTP 请求。 下面是一些常见的 `$http` 方法及其用途： - `$http.get(url, [config])`: 发送 GET 请求，获取数据。 - `$http.post(url, [body], [config])`: 发送 POST 请求，提交数据。 - `$http.put(url, [body], [config])`: 发送 PUT 请求，更新数据。 - `$http.patch(url, [body], [config])`: 发送 PATCH 请求，更新部分数据。 - `$http.delete(url, [config])`: 发送 DELETE 请求，删除数据。 - `$http.head(url, [config])`: 发送 HEAD 请求，获取响应头部信息。 - `$http.jsonp(url, [config])`: 发送 JSONP 请求，获取跨域数据。 这些方法的第一个参数都是请求的 URL，第二个参数是一个配置对象，用于设置请求的各种参数，例如请求头、请求体、超时时间等。 需要注意的是，在使用 `$http` 发送请求时，需要处理请求成功和失败的回调函数，例如： ```javascript this.$http.get('/api/data').then(response => { console.log(response.data) }).catch(error => { console.log(error) }) ``` 以上代码发送一个 GET 请求到 `/api/data`，并在请求成功和失败时分别打印响应数据和错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值