这段时间因为做毕设,涉及到AJAX的问题比较多,今天的问题就是一个。中所周知,ajax最大的特点就是局部刷新,可以在不更新整个页面的情况下刷新局部数据,但是,有时候这种优点也会成为一种优点,多说无益,直接上图
首先来看未操作之前的页面
之后我要开始添加了,点击按钮 添加美食 会新增一个菜系,菜名为ddd,价格为88,类型为饮料,为突出重点,我就不贴后台代码了,但是我用我50M的大屌保证后台没有任何毛病
上图
为了增加可信性,我们看一下数据库
但是页面上并没有这条数据
前端JS代码如下:
function addDishes(){
var newDishesName = $("#add_dishesname").val();
var newDishesPrice = $("#add_price").val();
var newDishesType = $("#add_type").val();
if(newDishesName==null || newDishesName==''){
alert("菜名不能为空")
}
if(newDishesPrice==null || newDishesPrice==''){
alert("价格不能为空")
}
if(newDishesType==null || newDishesType==''){
alert("类型不能为空")
}
$.ajax({
type:"post",
url:"<%=basePath%>dishes/addDishes.action",
async:true,
data : {
dishesname : newDishesName,
price : newDishesPrice,
dishestype : newDishesType
},
success : function(re){
if(re=="YES"){
alert("添加成功");
$("#addModal").modal("hide");
window.location.reload(true);
}else{
alert("添加失败");
}
},
error : function(re,jqXHR){
alert(re+jqXHR.status)
}
});
}
百度了好久,终于知道问题出在了哪,就是那个
async:true,
的问题,原因如下:
首先我们要知道AJAX同步和异步到底是怎么一回事,按照我的理解,最直观的体现就是在success上。
当我们设置
async : true
时,假设succes : {
f1();
f2();
}
这两个函数会异步执行,意思就是f1会执行自己的代码,但就在f1执行的过程中,f2也会执行,两者或不影响(没有锁的情况下),就想javaSE里的多线程异步执行一样
但是,当async为false时,两个函数会同步执行,即f1先执行,待f1执行完毕之后f2才开始执行。
这样上面的问题就很好解释了。。。
设置async : false
问题解决。。。吃饭
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
后续补充:对于同步异步的理解,可能有点偏差,正确的理解应该是:
fi();
ajax();
f2();
同步的执行顺序:f1(),ajax();f2()
意味着假设f1报错,执行不下去了,那么ajax()和f2都无法执行了
如果是异步,那么将是f1(),ajax(),f2()一起执行,即使有小伙伴阵亡在路上,也不耽误其他的战友们运行