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（）一起执行，即使有小伙伴阵亡在路上，也不耽误其他的战友们运行

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！