<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格式数据
          [
            {
              "name":"张三",
              "age":25
            },
            {
              "name":"李四",
              "age":28
            }
          ]
  //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
var data={
id:id,
isDelete:isDelete
}
fetch("/user/updateUser",{
headers: {
    'Content-Type': 'application/json; charset=UTF-8'
},
    method:"post",
    body:JSON.stringify(data),
}).then(res=>res.json()).then(res=>{
   console.log(res);
  if(res.success){
    location.reload();
}else{
  if(res.error){
    alert(res.message);
}
}
})
 

Fetch请求后台的数据的更多相关文章

  1. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  2. 【11】ajax请求后台接口数据与返回值处理js写法

    $.ajax({ url: "/test.php",//后台提供的接口 type: "post",   //请求方式是post data:{"type ...

  3. AFN请求后台返回数据为NSInlineData类型的处理

    在利用AFN进行数据解析时出现返回数据为 <7b227374 61747573 223a302c 226d6573 73616765 223a22e6 82a8e79a 84e6898b e69 ...

  4. echarts 中 请求后台改变数据

    function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...

  5. node后台fetch请求数据-Hostname/IP doesn't match certificate's altnames解决方法

    一.问题背景 基于express框架,node后台fetch请求数据,报错Hostname/IP doesn't match certificate's altnames..... require(' ...

  6. Swift - 后台获取数据(Background Fetch)的实现

    前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...

  7. 前后端数据交互(四)——fetch 请求详解

    fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpReques ...

  8. js页面用定时任务通过AJAX获取后台数据,但是从这个页面跳转到其他页面后,定时任务仍然在定时请求后台

    setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

  9. React native 中使用Fetch请求数据

    一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...

随机推荐

  1. 分布式系统监视zabbix讲解二之邮件报警通知--技术流ken

    概述 在上一篇博客<分布式系统监视zabbix讲解一技术流ken>中已经详细讲解了如何安装zabbix,本篇博客将详细讲解如何使用zabbix监控另外一台主机,并实现email报警通知机制 ...

  2. 第一册:lesson fifty nine。

    原文: Is that all? A:I want some envelopes ,please? B:Do you want the large size or small size? A:The ...

  3. ___Json帮助类

    using Newtonsoft.Json;using Newtonsoft.Json.Converters;using Newtonsoft.Json.Linq;using System.Colle ...

  4. 从零开始学安全(三)●黑客常用的windows端口

    端口可选1-65536 1-1024 预保留端口 留给windows系统服务的 下面是常见的端口对应的服务 1 TCP Port Service Multiplexer 传输控制协议端口服务多路开关选 ...

  5. 使用浏览器自定义协议启动本地程序(.EXE文件)

    比如,自定义协议名称为 myapp,要启动的本地程序为 myapp.exe. 1)首先向注册表添加如下内容: Windows Registry Editor Version 5.00 [HKEY_CL ...

  6. python面向对象学习(一)基本概念

    目录 1. 面向对象基本概念 1.1 过程和函数 1.2 面相过程 和 面相对象 基本概念 2. 类和对象的概念 1.1 类 1.3 对象 3. 类和对象的关系 4. 类的设计 大驼峰命名法 4.1 ...

  7. Netty 系列六(编解码器).

    一.概念 网络传输的单位是字节,如何将应用程序的数据转换为字节,以及将字节转换为应用程序的数据,就要说到到我们该篇介绍的编码器和解码器. 将应用程序的数据转换为网络格式,以及将网络格式转换为应用程序的 ...

  8. 异常:android.os.NetworkOnMainThreadException

    场景: 安卓开发时在主线程访问网络解决: 将访问网络的代码使用Thread操作 Handler handler = new Handler(){ @Override public void handl ...

  9. java package(包)的用法

    一般来说都用eclipse自动化图形工具搞定,我用的是ubuntu,所以需要自己打包引入. 什么是包? 这是对java源代码的组织和管理的一种方式,比如:当操作系统某个目录的文件非常多的时候,我们一般 ...

  10. 对比JavaScript中的Continue和Break

    译者按: 最好是不用,不过基础知识要掌握. 原文: JavaScript: Continue vs Break - Learn the difference between the continue ...