js的面向对象使用,传参的新方式,时间格式的传递
引入前端框架无非是用其样式和js
1,js就是从Java演变过来的,所以内部的js类像Java中的类一样用,js中像Java中一样实例化js中的类,用var接。其他用法一样
2,ajax中的data参数可以是json格式,也可以是url后缀格式,ajax会根据传输类型自动转化(get/post)
3,jsp传到后台的时间格式(字符串),后台如果pojo是date需要用@DateTimeFormat pattern中的格式要和jsp传过来的一致才能接到,也就说jsp也要传和pattern格式一样的字符串日期
(否则出现请求无效路径的错误)
java pojo:
@XmlTransient
@NotNull
@DateTimeFormat(pattern = "yyyyMMdd")
private Date tranDate;
js:
class RTable extends React.Component {
constructor(props) {
super(props);
//初始数据
this.products = products;
this.state = {
datas:[],
totalSize: 0,
sizePerPage: 5,
page: 1
}
//数据行选中配置
this.selectRowProp = {
mode: 'radio',
onSelect: this.onRowSelect,
onSelectAll: this.onSelectAll
}
this.ajaxRequestData = this.ajaxRequestData.bind(this);
this.handlePageChange = this.handlePageChange.bind(this);
this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);
}
componentDidMount(){
//请求第1页数据,且每页显示5条
alert(12);
this.ajaxRequestData();
}
}
//DOM加载完成
componentDidMount(){
//请求第1页数据,且每页显示5条
alert(12);
this.ajaxRequestData();
}
/*******************************************************************/
ajaxRequestData(page = this.state.page, sizePerPage = this.state.sizePerPage) {
alert("请求第" + page + "页数据,每页显示" + sizePerPage);
const currentIndex = (page - 1) * sizePerPage;
this.setState({
datas: products.slice(currentIndex, currentIndex + sizePerPage),
totalSize: products.length,
page:page,
sizePerPage:sizePerPage
})
//ajax加载数据
$.ajax({
url:this.props.url,
data:this.props.data,
type:'post',
success:function(str,msg,response){
if(response.statusText=="success"){
var result = JSON.parse(response.responseText);
this.setState({
datas:products
});
}
}.bind(this),
error:function(str,msg,response){
}.bind(this)
});
}
externalModalOnSave= (object) =>{
alert("添加"+object)
alert(11);
var dt= new Date().getTime();
var rt=new RTable();/////////////////////////////////js中像Java中一样实例化js中的类,用var接
var props={url:"",data:""};
props.url="http://localhost:8080/queryPayInstructionStatus";
////////////////////////ajax中的data参数可以是json格式,也可以是url后缀格式,
props.data=object+"&tranFunc=1021&counterId=69530&qydm=9012&servType=01&tranDate="+formatDate(new Date())+"&thirdLogNo="+new Date().getTime();//"&tranFunc=1021&tranDate="+formatDate(new Date());//+"&thirdLogNo="+new Date().getTime();//"&tranFunc=1021&counterId=69530&qydm=9012&servType=01&tranDate="+formatDate(new Date())+"&thirdLogNo="+new Date().getTime();//"supAcctId=1&paySerialNo=6";
rt.constructor(props);
rt.componentDidMount();
}
//20170327格式
var formatDate = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + m + d;
};