Fetch请求后台的数据
<style>
#btn{
width: 50px;
height: 50px;
background-color: red;
}
#output{
width: 100px;
height: 100px;
background-color: pink;
}
</style> <button id="btn"></button>
<div id="output"></div>
//jsong格式数据
//js代码
<script>
btn.onclick=function(){
fetch("data.json",{
headers:{
"Content-Type":"application/json"
},
}).then(function(res){
return res.json();
}).then(function(data){
console.log(data);
var str="";
data.forEach(item => {
str+=`<p>${item.name}<p>` });
document.getElementById("output").innerHTML=str; }).catch(error=>console.log(error))
}
</script>
/* Fetch发送请求 get*/
var page=1;
var pageSize=5;
var totalPage=0;
fetch(`/user/queryUser?page=${page}&pageSize=${pageSize}`, { headers: {
'Content-Type': 'application/json; charset=UTF-8'
}, }).then(res => res.json()).then(res => {
console.log(res);
totalPage=(Math.ceil(res.total/pageSize));
var html = template("userTpl", res);
console.log(html);
$("#userBox").html(html);
}).catch(err => {
console.log(err);
})
//Fetch请求 post
Fetch请求后台的数据的更多相关文章
- 一、表单和ajax中的post请求&&后台获取数据方法
一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...
- 【11】ajax请求后台接口数据与返回值处理js写法
$.ajax({ url: "/test.php",//后台提供的接口 type: "post", //请求方式是post data:{"type ...
- AFN请求后台返回数据为NSInlineData类型的处理
在利用AFN进行数据解析时出现返回数据为 <7b227374 61747573 223a302c 226d6573 73616765 223a22e6 82a8e79a 84e6898b e69 ...
- echarts 中 请求后台改变数据
function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...
- node后台fetch请求数据-Hostname/IP doesn't match certificate's altnames解决方法
一.问题背景 基于express框架,node后台fetch请求数据,报错Hostname/IP doesn't match certificate's altnames..... require(' ...
- Swift - 后台获取数据(Background Fetch)的实现
前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...
- 前后端数据交互(四)——fetch 请求详解
fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpReques ...
- js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台
setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...
- React native 中使用Fetch请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
随机推荐
- 分布式系统监视zabbix讲解二之邮件报警通知--技术流ken
概述 在上一篇博客<分布式系统监视zabbix讲解一技术流ken>中已经详细讲解了如何安装zabbix,本篇博客将详细讲解如何使用zabbix监控另外一台主机,并实现email报警通知机制 ...
- 第一册:lesson fifty nine。
原文: Is that all? A:I want some envelopes ,please? B:Do you want the large size or small size? A:The ...
- ___Json帮助类
using Newtonsoft.Json;using Newtonsoft.Json.Converters;using Newtonsoft.Json.Linq;using System.Colle ...
- 从零开始学安全(三)●黑客常用的windows端口
端口可选1-65536 1-1024 预保留端口 留给windows系统服务的 下面是常见的端口对应的服务 1 TCP Port Service Multiplexer 传输控制协议端口服务多路开关选 ...
- 使用浏览器自定义协议启动本地程序(.EXE文件)
比如,自定义协议名称为 myapp,要启动的本地程序为 myapp.exe. 1)首先向注册表添加如下内容: Windows Registry Editor Version 5.00 [HKEY_CL ...
- python面向对象学习(一)基本概念
目录 1. 面向对象基本概念 1.1 过程和函数 1.2 面相过程 和 面相对象 基本概念 2. 类和对象的概念 1.1 类 1.3 对象 3. 类和对象的关系 4. 类的设计 大驼峰命名法 4.1 ...
- Netty 系列六(编解码器).
一.概念 网络传输的单位是字节,如何将应用程序的数据转换为字节,以及将字节转换为应用程序的数据,就要说到到我们该篇介绍的编码器和解码器. 将应用程序的数据转换为网络格式,以及将网络格式转换为应用程序的 ...
- 异常:android.os.NetworkOnMainThreadException
场景: 安卓开发时在主线程访问网络解决: 将访问网络的代码使用Thread操作 Handler handler = new Handler(){ @Override public void handl ...
- java package(包)的用法
一般来说都用eclipse自动化图形工具搞定,我用的是ubuntu,所以需要自己打包引入. 什么是包? 这是对java源代码的组织和管理的一种方式,比如:当操作系统某个目录的文件非常多的时候,我们一般 ...
- 对比JavaScript中的Continue和Break
译者按: 最好是不用,不过基础知识要掌握. 原文: JavaScript: Continue vs Break - Learn the difference between the continue ...