首页 > 其他分享 >React 中用jQuery的ajax 和 axios请求数据

React 中用jQuery的ajax 和 axios请求数据

时间:2023-01-03 15:35:31浏览次数:43  
标签:jQuery axios isLoaded React records state error response


目录结构  单页文件Records.js

模拟一个mock数据:

1.https://www.mockapi.io/  可以使用github账号登陆

2.新建项目

3.我在此命名项目为accunt-app

4.填写你数据的名字

5.数据的健和类型

6.生成后可调节你想要的条数

7.可以在Data里预览数据

8.可在终端里看请求状态   API下面的那条url后面加上你的数据名

Records.js中所有内容

先说jquery的ajax:

1.项目中安装jQuery:yarn add jquery

2.引入 jquery :import $ from 'jquery'

3.创建视图表格

4.在钩子函数componentDidMount()中调用ajax

5.加载成功失败,state中isLoaded都是true

6.state中定义error时的状态,isLoaded加载时的状态,默认为false,和record初始化数据

成功时将state中的record赋给response数据,就是我们创建的mock数据 

7.用if  else判断视图是否正常加载,获取错误时显示给用户的内容,加载时显示给用户的内容,成功时展示给用户正常数据

import React, { Component } from 'react';

//如果只需要用jQuery来获取后端数据,别的不需要,可以按需导入,则下面使用时不用加$符号
//import {getJSON} from 'jquery';
//import $ from 'jquery'
import axios from 'axios'

class Records extends Component {
constructor(props) {
super(props);
this.state = {
error:null,
isLoaded:false,
records:[]
}
}

//在钩子函数中使用jQuery获取后端数据response成功则返回数据,失败返回error
componentDidMount(){
axios.get("https://5c407abd2928860014e07025.mockapi.io/api/v1/records")
.then(
response =>this.setState({
records:response.data,
isLoaded:true
}),
).catch(
error =>this.setState({
isLoaded:true,
error:error
}),
)
}

render() {
//相当于将state中的值导出,类似于const error = this.state.error;
const {error,isLoaded,}=this.state;
if(error){
return <div>
Error:{error.message}
</div>
}else if(!isLoaded){
return <div>
Loading...
</div>
}else {
return (
<div>
<table className="table table-border">
<thead>
<tr>
<th>日期</th>
<th>名称</th>
<th>金额</th>
</tr>
</thead>
<tbody>
{this.state.records.map((record,i)=>
<tr key={record.id}>
<td>{record.date}</td>
<td>{record.title}</td>
<td>{record.amount}</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
}
}

export default Records;

复制代码

axios方法 只需要将axios替换jQuery就可以

1.安装 npm install axios 或用yarn add axios

2.在需要用到的页面引入 import axios from 'axios'

3.替换jQuery请求部分 请求成功获取数据略有不同,一个直接获取response就是数据,一个要获取下面的data才能获取到数据

componentDidMount(){
axios.get("https://5c407abd2928860014e07025.mockapi.io/api/v1/records")
.then(
response =>this.setState({
records:response.data,
isLoaded:true
}),
).catch(
error =>this.setState({
isLoaded:true,
error:error
}),
)
}复制代码

最后效果

 

标签:jQuery,axios,isLoaded,React,records,state,error,response
From: https://blog.51cto.com/u_12422954/5986023

相关文章

  • react 基础 脚手架组件挂载 / 生命周期
    脚手架里的index.js配置组件的挂载importReactfrom'react'importReactDOMfrom'react-dom'//importLifefrom'./Life'importXiaojiejiefrom'./react/Xiaojiejie'......
  • React 小案例 用户评论
    功能展示:1.用户可输入用户名2.输入评论内容3.点击发布4.用户名和用户评论会被显示在列表里,第一个评论在最上面5.且显示本条评论离现在过去了多长时间6.鼠标放在事件上方可......
  • jQuery 加入购物车 弹窗
    功能介绍:1.点击按钮,出现弹窗,和蒙版2.购物车数量显示1件商品3.点击右上角关闭按钮,关闭弹窗,蒙版消失4.点击继续购物按钮,弹窗消失,蒙版消失5.点击去购物车按钮,跳转页面6.点击蒙......
  • jquery选项卡
    功能介绍:1.鼠标划过当前按钮,当前按钮变色2.对应图片展示3.鼠标划过其他按钮,对应图片出现,其他按钮变回原色,其他图片隐藏所有代码:<!DOCTYPEhtml><htmllang="en"><head><......
  • React 用axios 获取遍历json 引入swiper轮播图
    结构展示:功能展示:1.使用swiper轮播插件,2.自动轮播,当前图片高亮小按钮首先引入swiper和配置环境1.npminstall--saveswiper2.在src文件夹index.js下引入样式,避免打包失败im......
  • 记录报错 react Expected an assignment or function call and instead saw an expres
    报错:Expectedanassignmentorfunctioncallandinsteadsawanexpression no-unused-expressionsSearchforthekeywordstolearnmoreabouteacherror.期望一......
  • react Router 学习
     功能:1.进入项目后的默认路径是home,默认展示首页模块2.点击路由,切换子组件3.点击文章路由,根据传值不同进入三级详情路由,同时二级路由不显示4.点击返回首页,跳转到首页 安装......
  • react todolist 3
    功能:1.输入框输入事项,点击add,list增加一条,输入框清空并且聚焦;2.点击当前checkbox,勾选文字为已完成,取消勾选文字为未完成;父组件TodoList.js分成了三个子组件TodoHeader,TodoI......
  • react 做一个点赞按钮组件
      创建组件Like.js一开始设置为黑色false,isLiked如果为true渲染红心,false渲染黑心setState时用了两种方法importReact,{Component}from'react'exportdefaultclass......
  • react 渲染富文本中的标签内容
    假设拉取下来的是富文本携带html标签的内容应该如何渲染到页面:例:<div>我是富文本内容</div>在标签上使用dangerouslySetInnerHTML={{__html:this.state.article}}importRea......