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