Vue ajax关于get、post、jsonp的请求

最新推荐文章于 2024-05-16 12:53:35 发布
最新推荐文章于 2024-05-16 12:53:35 发布
阅读量2.6k 收藏 7
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_39001881/article/details/81259411
版权

get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue1026.js"></script>
    <script src="../vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="getdata()">get请求</button>
    {{dataOne | json}}
</div>
<script >
    new Vue({
        el: "#app",
        data:{
            dataOne:'',
        },

        methods:{
            getdata:function () {
                var url="http://192.168.1.61:9070/api/Materiel/GetATSDistribution";
                this.$http.get(url)
                .then(function (response) {
                    console.log(response.body)
                    this.dataOne=response.body;
                })
            }
        }
    })
</script>

</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue1026.js"></script>
    <script src="../vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="postdata()">post请求</button>
    {{dataOne | json}}
</div>
<script >
    new Vue({
        el: "#app",
        data:{
            dataOne:'',
        },

        methods:{
            postdata:function () {
                var url="http://192.168.1.61:9070/api/Materiel/GetATSDistribution";
                //传到服务器的请求文体的数据， emulateJSON:true固定写法
                this.$http.post(url,{
                    "NAMES":"空余"
                },
                    {
                        emulateJSON:true
                    })
                    .then(function(response){
                        console.log(response)
                    })

            }
        }
    })
</script>

</body>
</html>

JSONP请求

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue1026.js"></script>
    <script src="../vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <button @click="Jsonp()">get请求</button>
    {{dataOne | json}}
</div>
<script >
    new Vue({
        el: "#app",
        data:{
            dataOne:null,
        },

        methods:{
            Jsonp:function () {
                this.$http.jsonp("http://192.168.1.61:9070/api/Materiel/GetATSDistribution")
                    .then(function (response) {
                        this.dataOne=response.body
                        console.log(response)
                    })
        }
    }})
</script>

</body>
</html>
一朵小彩云
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue之使用ajax获取json数据，并用v-for循环显示在表格中
zhangdaohong的博客
11-13 1万+
https://www.cnblogs.com/creazybeauty/p/8569043.html Vue之使用ajax获取json数据，并用v-for循环显示在表格中 运行的时候，出现了php跨域问题，解决办法是在php的头文件中添加了如下代码：   header('Content-Type: application/json'); header('Content-Type...
Vue GET POST JSONP请求数据
weixin_42113716的博客
09-04 313
Vue GET POST JSONP请求数据
Ajax的post请求
zhang的博客
07-18 214
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="vue.js"&gt;&lt;/s
vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收_vue post请求要加@requestbody
最新发布
2401_84446610的博客
05-16 813
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。
vue axios get方法传json
zhang804633234的专栏
10-12 3579
var params = { current: 1, pageSize: 10 } this.$axios({ url: 'xxx', method: 'get', data: {searchParams: JSON.stringify(params)}, callback: (result) => { } }); ...
ajax请求 POST丨ajax简介,ajax提交数据的多种类型
灵感与学习结合-echo
01-26 5078
Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务 器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用 户的操作。同步和异步的区别同步：如果与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他 操作，只能等待服务器端的响应，会刷新页面。异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器响应客户端信息，将 信息更新到网页局部，整个过程页面不刷新。'''
Ajax：ajax发送Post请求、ajax案例
dengfengling999的博客
07-21 1万+
上面项目，目前存在的缺点在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端。能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。我们后端的java代码能不能只返回数据？（返回数据可以采用JSON的格式，也可以采用XML的格式）一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。......
vue接收jsp发送的post请求_vue---进行post和get请求
weixin_36414864的博客
12-24 1462
参考文档：https://www.jb51.net/article/125717.htm使用axios基本使用方法：get请求：// Make a request for a user with a given IDaxios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(functio...
Vue-resource实现ajax请求和跨域请求示例
08-31
Vue-resource支持多种HTTP请求方法，包括GET、HEAD、DELETE、JSONP、POST、PUT和PATCH。下面是一些常见的请求示例： 1. GET请求： ```javascript this.$http.get('http://example.com/data').then((response) => { ...
vue请求数据的三种方式
10-15
- **请求数据介绍**：vue-resource 是 Vue.js 的一个官方插件，它提供了类似于 jQuery 的 AJAX 功能，如 GET、POST、PUT 和 DELETE 等。 - **安装**：使用 `cnpm install vue-resource --save` 命令安装，这样可以...
使用vue-resource的get方法加载数据.pdf
08-20
2. **跨域支持**：通过XMLHttpRequest和JSONP，vue-resource能够处理跨域请求，适应各种服务端配置。 3. **兼容性**：vue-resource支持Vue 1.x和2.x版本，这确保了广泛的社区支持和项目兼容性。 在使用vue-resource...
XMLHttpRequest对象_Ajax异步请求重点(推荐)
11-28
在实际应用中，XMLHttpRequest对象常常与其他技术结合，如JSONP、jQuery的$.ajax()函数、Fetch API等，以简化异步请求的编写和管理。随着前端技术的发展，现在还有更多的库和框架（如axios、fetch、Vue.js、React等...
详解vue与后端数据交互(ajax)：vue-resource
08-31
总结，Vue-resource提供了丰富的API，方便Vue应用与后端进行数据交互，包括GET、POST和JSONP请求。这些功能使得开发者无需离开Vue的生态系统就能轻松地处理与服务器的数据交换，提高了开发效率。在实际项目中，还...
vue：Ajax和Json
qq_56043285的博客
06-15 102
JSON-java：JSON-java是一个开源的JSON处理类库，可以用于解析JSON字符串，生成JSON字符串，转换JSON对象，处理JSON文件等。Org.json：Org.json是一个开源的JSON处理类库，可以用于解析JSON字符串，生成JSON字符串，转换JSON对象，处理JSON文件等。Json-lib：一个基于Java的JSON处理类库，它可以将JSON字符串转换为Java对象，也可以将Java对象转换为JSON字符串。JSON 语法是 JavaScript 对象表示语法的子集。
vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收
热门推荐
见证自己学习,成长的记录
02-17 1万+
最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后端一起开发的时候，硬是搞了好久。下面就把问题总结分享下，防止后人再踩坑。首先先看下我的接口定义吧。其实就是一个很简单的新增，参数也不复杂。
前端基础学习——Vue框架-AJAX的使用
weixin_53919192的博客
07-14 6101
本文为大家介绍了前端基础学习——Vue框架-AJAX的使用，希望对你有帮助~~
Restful API 的设计规范
爱是与世界平行
09-07 643
一、URI 1.1 URI规范 1.2 资源集合 vs 单个资源 1.3 避免层级过深的URI 1.4 对Conposite资源的访问 二、Request 2.1 HTTP方法 2.2 安全性和幂等性 2.3 复杂查询 2.4 Bookmarker 2.5 Format 2.6 Content Negotiation 三、Response 分页res...
php jquery $.post,Jquery中$.post和$.ajax的用法分析
weixin_39548740的博客
03-09 216
本篇文章主要介绍Jquery中$.post和$.ajax的用法。Jquery的$.ajax的用法：jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据，这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于...
vue使用ajax库,在vue.js中使用Ajax发送get和post请求
weixin_36310976的博客
08-05 2209
在使用vue.js的时候，怎么和后台进行数据交互？你是否发现直接像jquary那样写是不可行的，因为vue.js中没有内置任何ajax请求方法。所以需要借助第三方资源库在发送ajax请求。一、资源库的安装和使用使用vue.js发送ajax请求，要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现。1、利用npm安装(二选一)npm install axios...
vue中get和post请求的区别
07-28
在Vue中，get和post请求是两种常见的HTTP请求方法，它们有一些区别： 1. 数据传输方式：get请求将数据通过URL的查询参数传输，而post请求将数据放在请求的body中传输。 2. 数据传输大小：get请求受URL长度限制，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值