关于js中Ajax的同步、异步使用-优快云博客

本文通过一个具体的示例，详细解析了在前后端交互中，如何使用Ajax进行同步和异步操作。通过一个简单的div元素和触发事件，展示了如何在JavaScript中设置Ajax调用，以及如何在不同情况下选择同步或异步方式来优化页面执行效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面一个简单的例子，说明前后端交互中，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调用的后台接口再去执行，这样表达在页面上，执行效率就会快很多。

转载于:https://www.cnblogs.com/jiuyueBlog/p/10183795.html