最近做项目遇到用ajax从数据库取值,当把值放进数组之后得到的是空值,因为js是同步的,只能走单线程,ajax是异步的。
一开始的解决办法是将ajax设置成同步
即加一个属性
async: false
但是这种方法只在火狐浏览器有效,谷歌的说法是不提倡设置为同步,同一个页面打开第二次便会出错。
后来查资料,写了一种方法,测试在谷歌有效,直接贴代码
function getData3(){ var defer = $.Deferred(); $.ajax({ url : 'get_meal_list.html', success: function(data){ data.forEach(function(list) { var meal = {name: list.list, restaurant: list.restaurant, meal: list.meal, price: list.price}; meal_list = JSON.parse(localStorage.getItem("meal_list")) || []; meal_list.push(meal); }) } }); return defer.promise(); } function get_data(){ $.when(getData3()).done(function(data){ localStorage.removeItem('meal_list'); localStorage.setItem('meal_list', JSON.stringify(meal_list)); }); console.log(localStorage.getItem('meal_list')) }
重点在于第二段函数$.when().then,意义是上一个执行完之后执行执行,这样可以成功的得到meal_list
我之前的写法
function get_all_meal_list(){ $.ajaxSettings.async = false; var meal_list=[]; localStorage.removeItem('meal_list'); $.ajax({url:"get_meal_list.html",success:function(data){ data.forEach(function(list){ var meal={name:list.list,restaurant:list.restaurant,meal:list.meal,price:list.price}; meal_list = JSON.parse(localStorage.getItem("meal_list")) || []; meal_list.push(meal); localStorage.removeItem('meal_list'); localStorage.setItem('meal_list', JSON.stringify(meal_list)); console.log(localStorage.getItem('meal_list')) }) }}); }
这样的话在另一而函数调用name_list得到的是空值,简直无语了