关于js中Ajax的同步、异步使用
下面一个简单的例子,说明前后端交互中,Ajax同步和异步的使用
1、设置简单的一个div,包含触发事件
CompanyType()
<div> <input type="hidden" id="branchHidden" name="branchHidden" value="" /> <input type="hidden" id="companyType" name="companyType" value="" /> @Html.DropDownList("companyList", ViewData["companyList"] as SelectList, new { @class = "select1 month", id = "branch", onchange = "CompanyType();Time1();" }) </div>
2、写一个Ajax,调用后台的方法
<script type="text/javascript"> function CompanyType() { var companyId = document.getElementById('branchHidden').value;//获取隐藏域的值 $.ajax({ url: "@Url.Action("GetCompanyNatureId", "Basic")",//需要调用的控制器里面的方法;控制器名
Basic,方法名
GetCompanyNatureId,,,,,url的写法有多种,也可以写成其他形式的url
async: false, //这个表示是否同步,false是同步,,,,true是异步,,,,,如果不写这个,默认为异步,,,注意点!!!
data: { companyId: companyId }, //data是要传的参数,冒号前面是参数名,务必和后台方法体的参数名保持一致,后面是要传的参数值
success: function (data) {
$("#companyType").val(data); } //这个data是后台接口调用成功之后返回的参数,需要注意的是,如果掉成功之后在这个function函数里面要执行这样的方法,并使用返回参数,那么后台接口的返回值类型要设置字符串类型,具体看下方代码
});
}
</script>
public string GetCompanyNatureId(string CompanyId) { return business.GetCompanyNatureId(CompanyId); }
public string GetCompanyNatureId(string CompanyId) { string CompanyNatureId = ""; CompanyMdl subCompany = new core.CompanyMdl { CompanyID = CompanyId }; BaseResponse<List<CompanyMdl>> RsCompany = new BaseResponse<List<core.CompanyMdl>>(); RsCompany = data.GetSubCompanyList(subCompany); List<CompanyMdl> companyList = new List<CompanyMdl>(); companyList = RsCompany.Data; if (companyList.Count > 0) { CompanyNatureId = companyList[0].CompanyNatureId; } return CompanyNatureId; }
string apiUrl = System.Configuration.ConfigurationManager.AppSettings["APIUrl"].ToString(); //api地址
//这个是调用接口的数据
public BaseResponse<List<CompanyMdl>> GetSubCompanyList(CompanyMdl subCompany) { BaseResponse<List<CompanyMdl>> Response = new BaseResponse<List<CompanyMdl>>(); try { Response = SendHttpRequest<BaseResponse<List<CompanyMdl>>>(apiUrl + "api/Bx/GetSubCompanyList",GetJsonFromObj<CompanyMdl>(subCompany), CommonHttpWebMethodEnum.POST); } catch (Exception ex) { throw ex; } return Response; }
注意一下红色标识!!!
我的触发事件中有两个函数的调用:CompanyType();Time1();
那么,同步和异步究竟是怎么体现的呢?
第一种情况:
我的
CompanyType()中有Ajax的调用,而且返回值要在
Time1()函数中用到,所以,
我需要先调用完后台接口之后,再执行
Time1()函数,这就要用同步,,,,Ajax和后台接口执行完了之后,再走下一个函数;
第二种情况:
CompanyType()和
Time1(),相互独立,没有交叉的引用,那么,我可以选择使用异步,这两个函数先后执行完之后,Ajax调用的后台接口再去执行,这样表达在页面上,执行效率就会快很多。
提着昨日种种千辛万苦,向明天换一些美满和幸福。