10 Source-Get-Post-JsonP 网络请求

2024-09-08 11:48
文章标签 请求 网络 post get source jsonp

本文主要是介绍10 Source-Get-Post-JsonP 网络请求,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

划重点
  • 使用vue-resource.js库 进行网络请求操作
  • POST : this.$http.post ( … )
  • GET : this.$http.get ( … )
小鸡炖蘑菇
<!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-UA-Compatible" content="ie=edge"><script src="./lib/vue-2.6.10.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> --><script src="./lib/vue-resource.js"></script>  <title>Document</title>
</head><body><div id="app"><table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><tr  v-show="flag" v-for="item in list" :key="item.id" ><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.ctime }}</td><td><a href="http://www.baidu.com" @click.prevent="del">删除</a></td></tr></tbody></table></div><script>Vue.http.options.root = 'http://jsonplaceholder.typicode.com/';//全局配置根 地址Vue.http.options.emulateJSON = true;var vm = new Vue({el: '#app',data: {flag: false,//默认没有加载完成数据的情况下:不显示list: [{ id: 1, name: '奔驰', ctime: new Date() },{ id: 2, name: '法拉利', ctime: new Date() }]},created() {this.testUrl();},methods: {del() {alert("22344578");},testUrl() {// 前端服务器测试用的万能地址:http://jsonplaceholder.typicode.com/users//POST  // this.$http.post('http://jsonplaceholder.typicode.com/users').then(response => {//     alert('Post传统请求成功');// }, response => {//     alert('Post请求失败~~~');// })// GET /someUrlthis.$http.get('users').then(response => {this.flag = true;// get body datathis.list = response.body;alert(this.list+"333")});// 传统写法// this.$http.get('http://jsonplaceholder.typicode.com/users').then(function (response) {//     alert("传统请求成功");//     // 响应成功回调// }, function (response) {//     // 响应错误回调//     alert('传统请求失败~~~');// });}}})</script>
</body></html>
网络请求结果的效果图

在这里插入图片描述

这篇关于10 Source-Get-Post-JsonP 网络请求的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1148028

相关文章

python运用requests模拟浏览器发送请求过程

《python运用requests模拟浏览器发送请求过程》模拟浏览器请求可选用requests处理静态内容,selenium应对动态页面,playwright支持高级自动化,设置代理和超时参数,根据需... 目录使用requests库模拟浏览器请求使用selenium自动化浏览器操作使用playwright

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

Linux网络配置之网桥和虚拟网络的配置指南

《Linux网络配置之网桥和虚拟网络的配置指南》这篇文章主要为大家详细介绍了Linux中配置网桥和虚拟网络的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、网桥的配置在linux系统中配置一个新的网桥主要涉及以下几个步骤:1.为yum仓库做准备,安装组件epel-re

使用nohup和--remove-source-files在后台运行rsync并记录日志方式

《使用nohup和--remove-source-files在后台运行rsync并记录日志方式》:本文主要介绍使用nohup和--remove-source-files在后台运行rsync并记录日... 目录一、什么是 --remove-source-files?二、示例命令三、命令详解1. nohup2.

python如何下载网络文件到本地指定文件夹

《python如何下载网络文件到本地指定文件夹》这篇文章主要为大家详细介绍了python如何实现下载网络文件到本地指定文件夹,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下...  在python中下载文件到本地指定文件夹可以通过以下步骤实现,使用requests库处理HTTP请求,并结合o

Linux高并发场景下的网络参数调优实战指南

《Linux高并发场景下的网络参数调优实战指南》在高并发网络服务场景中,Linux内核的默认网络参数往往无法满足需求,导致性能瓶颈、连接超时甚至服务崩溃,本文基于真实案例分析,从参数解读、问题诊断到优... 目录一、问题背景:当并发连接遇上性能瓶颈1.1 案例环境1.2 初始参数分析二、深度诊断:连接状态与

Spring Boot Controller处理HTTP请求体的方法

《SpringBootController处理HTTP请求体的方法》SpringBoot提供了强大的机制来处理不同Content-Type​的HTTP请求体,这主要依赖于HttpMessageCo... 目录一、核心机制:HttpMessageConverter​二、按Content-Type​处理详解1.