写项目经常用到ajax，ajax在默认情况下async=true，即异步；
大致说一下同步异步是什么意思：
比方你在烤面包，当你把面包放进烤面包机里边，然后你就一直在哪儿傻等着，一直等到面包烤好了你取出面包再开始做下面的事情这个就是同步。
异步的话就是你不等面包烤好，把面包放进烤面包机之后你就去做其他事情去了，当烤面包机一声铃响提示你烤好了，你取出面包再开始做下面的事情这个就是异步。
之前一直不太会用同步异步，后来写项目遇到问题，解决不了请教别人才知道是同步异步的问题，接下来直接上代码，对了！！！！注意不要把async写成asyne。。emmmm不要问我是怎么知道的
首先要实现的功能是 如图 动态获取下拉列表 数据库中有关系表
代码如下
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#view").hide();
$.ajax({
url:"<%=request.getContextPath()%>/goodsServlet?method=getGoodsListJson&page=1",
type:"post",
data:"",
dataType:"json",
success:function(obj){
//obj[0]是pageUtil对象
objPage=obj[0];
for(var i=1;i<obj.length;i++){
var h="<td>"+obj[i].gname+
"</td><td>"+obj[i].price+
"</td><td>"+obj[i].cname+
"</td><td>"+obj[i].bname+
"</td><td><button onClick='toUpdate("+obj[i].id+")'>更新</button></td>";
}
$("#list").html(h);
}
});
})
//分页
function toPage(page){
$.ajax({
url:"<%=request.getContextPath()%>/goodsServlet?method=getGoodsListJson",
type:"post",
data:{
page:page
},
dataType:"json",
success:function(obj){
objPage=obj[0];
var h="";
for(var i=1;i<obj.length;i++){
h+="<td>"+obj[i].gname+"</td><td>"
+obj[i].price+"</td><td>"
+obj[i].cname+"</td><td>"
+obj[i].bname+"</td><td><button onClick='toUpdate("+obj[i].id+")'>更新</button></td>";
}
$("#list").html(h);
}
})
}
//提交
function tijiao(){
var id=$("#id").val();
var cId=$("#cate").val();
var bId=$("#brand").val();
var name=$("#goods_name").val();
var desc=$("#desc").val();
var price=$("#goods_price").val();
//alert(id);
$.ajax({
url:"<%=request.getContextPath()%>/goodsServlet?method=update",
type:"post",
data:{
id:id,
cId:cId,
bId:bId,
name:name,
desc:desc,
price:price,
},
dataType:"text",//预期服务器返回的数据类型
success:function(obj){
if("ok"==obj){
alert("更新成功");
}
//alert(id);
}
});
};
//新增
function add(){
location.href="<%=request.getContextPath() %>/goods_add.jsp";
}
//回显
function toUpdate(id){
$("#view").show();
//获取品牌列表框
function getBrandList(){
//获取分类对应的id
var cateId=$("#cate").val();
var h="";
//遍历关系列表 根据分类id获取品牌id
for(var i=0;i<cateBrand.length;i++){
if(cateId==cateBrand[i].cate_id){
//通过关系列表获取对应的品牌id
var brandId=cateBrand[i].brand_id;
//遍历品牌id 获取上边拿到的id
for(var j=0;j<brandList.length;j++){
if(brandId==brandList[j].brand_id){
h+="<option value='"+brandList[j].brand_id+"'>"+brandList[j].brand_name+"</option>";
}
}
}
}
$("#brand").html(h);
}
var cateList,brandList,cateBrand;
$.ajax({
url:"<%=request.getContextPath()%>/goodsServlet?method=getCateBrand",
type:"post",
data:"",
dataType:"json",
async: false,
success:function(obj){
cateList=obj.cateList;
brandList=obj.brandList;
cateBrand=obj.cateBrand;
//分类框
var h="";
for(var i=0;i<cateList.length;i++){
h += "<option value='"+cateList[i].cate_id+"'>"+obj.cateList[i].cate_name+"</option>";
}
$("#cate").html(h);
getBrandList();
}
});
//品牌框随分类框变化
$("#cate").change(function(){
//alert("cate变化了");
getBrandList();
});
$.ajax({
url:"<%=request.getContextPath()%>/goodsServlet?method=toUpdate",
type:"post",
async: false,
data:{
id:id
},
dataType:"json",
success:function(obj){
//var id=obj.id;
var price=obj.price;
var desc=obj.gdesc;
var name=obj.gname;
var cId=obj.cid;
var bId=obj.bid;
//alert(id);
//回显数据 id是隐藏的 但是也要进行回显 以便于更新过后点提交获取要更新的id
$("#id").val(id);
$("#goods_price").val(price);
$("#desc").val(desc);
$("#goods_name").val(name);
$("#cate").val(cId);
getBrandList(); //强制让它进行品牌的更新
$("#brand").val(bId);
//$("#select_id option[value='"+msg.data.categoryId+"']").attr("selected","selected");根据值让option选中
/* $("#cate option[value='"+cId+"']").attr("selected","selected");//选中分类
getBrandList();//强制让它进行品牌的更新
$("#brand option[value='"+bId+"']").attr("selected","selected"); */
}
});
}
</script>
</head>
<body>
<table id="tab" border="1">
<tr id="banner">
<td>商品名称</td>
<td>商品价格</td>
<td>商品分类名称</td>
<td>商品品牌名称</td>
<td>操作</td>
</tr>
<tr id="list"></tr>
<tr>
<td colspan="10">
<button onClick="add()">新增</button>
<button onClick="toPage(1)">首页</button>
<button onClick="toPage(objPage.prevPage)">上一页</button>
<button onClick="toPage(objPage.nextPage)">下一页</button>
<button onClick="toPage(objPage.lastPage)">尾页</button>
</td>
</tr>
</table>
<form id="form">
<div id="view">
<input type="hidden" id="id">
<table id="tt" border="1">
<tr>
<td>商品分类</td>
<td><select id="cate"></select></td>
</tr>
<tr>
<td>品牌</td>
<td><select id="brand"></select></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" id="goods_name"></td>
</tr>
<tr>
<td>描述</td>
<td><textarea rows="10" cols="20" id="desc"></textarea></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" id="goods_price"></td>
</tr>
<tr>
<td colspan="10">
<div align="center">
<button id="sub" onclick="tijiao()">提交</button>
<input type="reset" value="重置">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
这里由于是两级联动 所以必须使用异步！