@{
ViewData["Title"] = "Index";
}
自己敲的ajax
React 实例//type="text/babel"
classUserGist extends React.Component {
constructor(props) {
super(props);//在state设置两个属性,以便后续通过state对象来对其进行修改
this.state ={List:[]};//绑定挂载事件
this.componentDidMount = this.componentDidMount.bind(this);
}
componentDidMount() {//接下来操作state时上下文对象发生改变,此处拿到操作句柄
var that = this;//ajax请求
this.serverRequest =$.ajax({
url:this.props.source,
type:"GET",
dataType:'json',
success: function (result) {
console.log(result);var lastGist =result;//此处的上下文发生改变,this的指针指向发生了变化,通过上述定义的that来操作
that.setState({
List: result,
})
}
})
}
DelUser(index) {const insertUser = "http://localhost:58646/api/Qx/DelLog?id=" +index
fetch(insertUser, { method:"post"}
)
.then(response=>response.json())
.then(data=>{
console.log(data)this.setState({
List:this.state.List
})if (data > 0) {
alert("删除成功");
window.location.href= "http://localhost:62817/Ajax/Index";
}
})
}//卸载React组件时,把多余请求关闭,以免影响其他框架或组件的操作
componentWillUnmount() {this.serverRequest.abort();
}//添加按钮跳转事件
AddReact() {
window.location.href= "http://localhost:62817/Ajax/Add";
}//修改按钮点击跳转事件
UptUser(id){
window.location.href= "http://localhost:62817/Ajax/Upt?id="+id;
}//查询按钮点击事件
CxReact()
{const insertUser = "http://localhost:58646/api/Qx/CxLog?name=" +this.name.value
fetch(insertUser, { method:"post"}
)
.then(response=>response.json())
.then(data=>{
console.log(data)this.setState({
List: data
})//if (data > 0) {//window.location.href = "http://localhost:62817/Ajax/Index";//}
})
}
render() {return(
添加操作人名称是: this.name = name} />
查询
主键Id操作人操作状态操作时间操作
{this.state.List.map((item,index) =>{return({item.lId}{item.userName}{item.state}{item.time}删除修改)}
)
}
@*{this.state.date[0].userName} 用户最新的 Gist 共享地址: {this.state.lastGistUrl}*@}
}
ReactDOM.render(,
document.getElementById('example')
);