1.设置 setTimeout定时器,通过延迟下一操作的执行时间,来解决ajax网络请求和下一操作异步的冲突(注意:时长的设置要大于等于网络请求的执行时间),代码如下
// 定义状态机
constructor(props, context) {
super(props, context);
this.state = {
content:null
}
}
//网络请求方法
Add = () => {
var formData = new FormData($("#userForm")[0]); // 定位到userForm表单,并将表单定位转为FormData对象
$.ajax({
url: '/add', //网络请求url地址
type: 'POST',
data: formData, //表单数据
cache: false,
contentType: false, //或者 contentType:multipart/form-data均可以,multipart/form-data表示可以上传下载文件(既可以发送文本数据,也支持二进制数据上载),表明传输的数据要用到多媒体传输协议,由于多媒体传输的都是大量的数据,所以规定上传文件必须是post方法;contentType默认为application/x-www-form-urlencoded不能上传文件
processData: false,
success: function (data) {
console.log('成功'); this.setState({content:'修改成功'})
}.bind(this),
error: function (xhr, status, err) {
}.bind(this)
});
}
//执行操作
this.add();
setTimeout(() => {
if(this.state.content=='修改成功'){alert('修改成功')}
else{alert('修改失败')}
}, 1000);
//如果不加1秒定时延迟,会直接进行判断,即未等网络请求结束便进行了判断
2.设置 ajax中参数async的属性
- async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
- 通过该方式解决1中的异步问题,加上async:false, 代码如下
/ 定义状态机
constructor(props, context) {
super(props, context);
this.state = {
content:null
}
}
//网络请求方法
Add = () => {
var formData = new FormData($("#userForm")[0]); // 定位到userForm表单,并将表单定位转为FormData对象
$.ajax({
url: '/add', //网络请求url地址
type: 'POST',
data: formData, //表单数据
async:false,
cache: false,
contentType: false, //或者 contentType:multipart/form-data均可以,multipart/form-data表示可以上传下载文件(既可以发送文本数据,也支持二进制数据上载),表明传输的数据要用到多媒体传输协议,由于多媒体传输的都是大量的数据,所以规定上传文件必须是post方法;contentType默认为application/x-www-form-urlencoded不能上传文件
processData: false,
success: function (data) {
console.log('成功'); this.setState({content:'修改成功'})
}.bind(this),
error: function (xhr, status, err) {
}.bind(this)
});
}
//执行操作
this.add();
if(this.state.content=='修改成功'){alert('修改成功')}
else{alert('修改失败')}