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 ' ...
随机推荐
- Spring Cloud Stream消费失败后的处理策略(一):自动重试
之前写了几篇关于Spring Cloud Stream使用中的常见问题,比如: 如何处理消息重复消费 如何消费自己生产的消息 下面几天就集中来详细聊聊,当消息消费失败之后该如何处理的几种方式.不过不论 ...
- AFNetworking封装-项目使用
本篇博客是接着上一篇AFNetworking源码解析的后续,如果想对AFNetworking源码有所了解. 请读一下https://www.cnblogs.com/guohai-stronger/p/ ...
- Python GUI
1.flexx Flexx 是一个纯Python工具包,用来创建图形化界面应用程序.其使用 Web 技术进行界面的渲染.你可以用Flexx来创建桌面应用,同时也可以导出一个应用到独立的 HTML 文档 ...
- [PHP] PHP闭包(closures)
1.闭包函数也叫匿名函数,一个没有指定名称的函数,一般会用在回调部分 2.闭包作为回调的基本使用, echo preg_replace_callback('~-([a-z])~', function ...
- Git中的"pull request"真正比较的是什么?
前言 利用git版本控制工具时,我们通常会从主分支拉出新分支进行开发,开发完成后创建pr(也就是pull request),让其他小伙伴帮忙review,确定代码没有问题后再将新分支合并到主分支上.但 ...
- 【Java每日一题】20170228
20170227问题解析请点击今日问题下方的“[Java每日一题]20170228”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; import jav ...
- 使用laravel框架开发接口时ajax post请求报错419
nginx服务器,使用laravel框架开发后台接口.get请求正常,但是post请求一直报错.H5和APP都不成功,code=419. 解决办法: 找到 VerifyCsrfToken.php文件( ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- vuejs2.0运用原生js实现简单的拖拽元素功能
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- MongoDB 通过配置文件启动及注册服务
1.配置mongodb环境变量,配置完成之后就可以直接执行mong.mongod等常用命令,不用每次都到mongodb安装目录bin下去执行: 2.通过命令启动mongo服务 mongod --dbp ...