(react)获取json数据与传入(antd配合)
import React from 'react';
import {fetch} from 'whatwg-fetch';
// import {HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
import { Table,Input,Button,Radio,Modal} from 'antd'; import './index.css'; export default class Home extends React.Component {
constructor(props){
super(props)
this.state = {
columns : [
{ title: 'id', dataIndex: 'id', key: 'id' },
{ title: '日期', dataIndex: 'date', key: 'date' },
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '地址', dataIndex: 'address', key: 'address' },
{title: '删除', dataIndex: '',key: 'x',render: () => <a href="javascript:;">Delete</a>,},
],
data:[] ,
visible: false, id:3,
xm:'',
dizhi:'',
date:'',
}
} render() { return(
<div className='app'>
<Table
columns={this.state.columns} dataSource={this.state.data}
/>,
<Button className='btn' type="primary" shape="round" onClick={this.showModal} >
添加项目
</Button> <Modal
title="录入用户"
visible={this.state.visible}
onOk={this.handleOk}
okText='确认'
onCancel={this.handleCancel}
cancelText='取消'
>
<p>姓名:<Input className='inp' placeholder="请输入姓名" onChange={this.xm.bind(this)} /></p>
<p>地址:<Input className='inp' placeholder="请输入地址" onChange={this.dz.bind(this)} /></p> </Modal> </div> )
}
componentDidMount(){
//获取json里的数据
var that = this;
fetch("http://localhost:3000/user", {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// },
// mode: "cors",
// body: JSON.stringify({
// content: "留言内容"
// })
}).then((res)=>
res.json()
).then((res)=> { that.setState({ data:res, })
console.log(res)
}).catch((err) =>{
console.log(err);
}); }
xm = (e)=>{
//var that = this;
let val = e.target.value; console.log(val)
this.setState({
xm:val,
val:''
}) } dz = (e)=>{
//var that = this;
let val = e.target.value;
console.log(val)
this.setState({
dz:val,
val:''
})
} showModal = () => {
this.setState({
visible: true,
});
}; handleOk = e => { let date = new Date();
let asd = date.getTime();
let obj={
date:asd,
name:this.state.xm,
address:this.state.dz, } this.state.data.push(obj)
//把写好的数据传入db.json
fetch("http://localhost:3000/user", {
method: "POST",
body: JSON.stringify({
...obj,
}),
headers: {
"content-type": "application/json"
}
})
.then(response => response.json())
.then(res => {
console.log(res); });
// this.setState({ visible: false,
});
}; handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
}; }
(react)获取json数据与传入(antd配合)的更多相关文章
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- Netflix Falcor获取JSON数据
Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- (转)android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection 复制代码 ...
随机推荐
- canvas-screenshot 视频截屏功能,选择视频的一个区域,进行截图
预览地址:http://pengchenggang.gitee.io/canvas-screenshot/ 参考资料:https://www.canvasapi.cn/ <!DOCTYPE ht ...
- C# 中的for/foreach循环
for 循环是一个执行特定次数的循环的重复控制结构. C# 中 for 循环的语法: for ( init; condition; increment ) { statement(s); } 执行流程 ...
- Electron Mac 打包报 Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT 解决方法
Electron 项目使用vue-cli-electron-builder创建,原来我的 Mac 上编译都很正常 自从 Mac 升级到 mac OS ventura version 13.0.1 后打 ...
- [原创] KCP 源码分析(上)
KCP 协议是一种可靠的传输协议,对比 TCP 取消了累计确认(延迟 ACK).减小 RTO增长速度.选择性重传而非全部重传.通过用流量换取低时延. KCP 中最重要的两个数据结构IKCPCB和IKC ...
- 结构体、共用体与C++基础
结构体.共用体与C++基础 1.结构体 结构体是C编程中一种用户自定义的数据类型,类似于Java的JavaBean //Student 相当于类名 //student和a 可以不定义,表示结构变量,也 ...
- 【3D可视化】3D可视化在智慧园区的应用
随着5G运用和新基建政策,构建智慧城市系统成为当下城市管理的热门需求,智慧园区建设的核心是3D可视化平台,利用它可以提高企业园区智能化.3D数字化管理服务水平. 一.智慧园区概念 "3D可视 ...
- 3DCAT v2.1.3新版本发布,这三大功能更新你不容错过!
3DCAT实时渲染云在近期发布了新的公有云v2.1.3的版本,本次主要更新了应用页的三项功能「语音交互设置」.「多点触控」.「音频信号位深」. 小编将对这三项更新进行讲解: 1. 调整语音通讯机制 新 ...
- 洞元智维产品上线:江浙沪PV访问量飙升背后的深层逻辑与未来发展趋势
洞元智维产品自上线以来,凭借其卓越的智能化产品性能和出色的用户体验,迅速在市场上崭露头角,特别是在上海.江苏.浙江等经济发达地区,其PV访问量持续飙升.这不仅反映了用户对智能化产品的强烈需求,更揭示了 ...
- 记录--UNI-APP安卓本地打包详细教程(保姆级)
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.开发环境 uni-app 官方文档地址 原生开发者支持 1.Android Studio 下载地址:Android Studio官网 ...
- Java Agent技术
在定位公司问题的时候,需要了解一下skywalking的相关知识,而agent就提上了日程. 官网文档 Agent技术是Jdk在1.5版本之后,所提供的一个在jvm启动前后对部分java类代理加强的机 ...