AJAX请求后页面数据未刷新问题

这段时间因为做毕设，涉及到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（）一起执行，即使有小伙伴阵亡在路上，也不耽误其他的战友们运行