1. <style>
  2. #btn{
  3. width: 50px;
  4. height: 50px;
  5. background-color: red;
  6. }
  7. #output{
  8. width: 100px;
  9. height: 100px;
  10. background-color: pink;
  11. }
  12. </style>
  13.  
  14. <button id="btn"></button>
  15. <div id="output"></div>
  1.   //jsong格式数据
          [
            {
              "name":"张三",
              "age":25
            },
            {
              "name":"李四",
              "age":28
            }
          ]
  1.   //js代码
  1. <script>
  2. btn.onclick=function(){
  3. fetch("data.json",{
  4. headers:{
  5. "Content-Type":"application/json"
  6. },
  7. }).then(function(res){
  8. return res.json();
  9. }).then(function(data){
  10. console.log(data);
  11. var str="";
  12. data.forEach(item => {
  13. str+=`<p>${item.name}<p>`
  14. });
  15. document.getElementById("output").innerHTML=str;
  16. }).catch(error=>console.log(error))
  17. }
  18. </script>
  1. /* Fetch发送请求 get*/
  2. var page=1
  3. var pageSize=5
  4. var totalPage=0;
  5. fetch(`/user/queryUser?page=${page}&pageSize=${pageSize}`, {
  6.  
  7. headers: {
  8.   'Content-Type': 'application/json; charset=UTF-8'
  9. },
  10.  
  11. }).then(res => res.json()).then(res => {
  12.   console.log(res);
  13.   totalPage=(Math.ceil(res.total/pageSize));
  14.   var html = template("userTpl", res);
  15.   console.log(html);
  16.   $("#userBox").html(html);
  17. }).catch(err => {
  18. console.log(err);
  19. })
    //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);
}
}
})
  1.  

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. Spring Cloud Stream消费失败后的处理策略(一):自动重试

    之前写了几篇关于Spring Cloud Stream使用中的常见问题,比如: 如何处理消息重复消费 如何消费自己生产的消息 下面几天就集中来详细聊聊,当消息消费失败之后该如何处理的几种方式.不过不论 ...

  2. AFNetworking封装-项目使用

    本篇博客是接着上一篇AFNetworking源码解析的后续,如果想对AFNetworking源码有所了解. 请读一下https://www.cnblogs.com/guohai-stronger/p/ ...

  3. Python GUI

    1.flexx Flexx 是一个纯Python工具包,用来创建图形化界面应用程序.其使用 Web 技术进行界面的渲染.你可以用Flexx来创建桌面应用,同时也可以导出一个应用到独立的 HTML 文档 ...

  4. [PHP] PHP闭包(closures)

    1.闭包函数也叫匿名函数,一个没有指定名称的函数,一般会用在回调部分 2.闭包作为回调的基本使用, echo preg_replace_callback('~-([a-z])~', function ...

  5. Git中的"pull request"真正比较的是什么?

    前言 利用git版本控制工具时,我们通常会从主分支拉出新分支进行开发,开发完成后创建pr(也就是pull request),让其他小伙伴帮忙review,确定代码没有问题后再将新分支合并到主分支上.但 ...

  6. 【Java每日一题】20170228

    20170227问题解析请点击今日问题下方的“[Java每日一题]20170228”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; import jav ...

  7. 使用laravel框架开发接口时ajax post请求报错419

    nginx服务器,使用laravel框架开发后台接口.get请求正常,但是post请求一直报错.H5和APP都不成功,code=419. 解决办法: 找到 VerifyCsrfToken.php文件( ...

  8. 基于jquery二维码生成插件qrcode

    1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...

  9. vuejs2.0运用原生js实现简单的拖拽元素功能

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  10. MongoDB 通过配置文件启动及注册服务

    1.配置mongodb环境变量,配置完成之后就可以直接执行mong.mongod等常用命令,不用每次都到mongodb安装目录bin下去执行: 2.通过命令启动mongo服务 mongod --dbp ...