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

关于js中Ajax的同步、异步使用的更多相关文章

  1. JS中Ajax的同步和异步

    ajax同步 : 意味着此时请求Server后,JS代码不再继续执行,等待Server返回后才继续往下执行. ajax异步 : 意味着此时请求Server后,JS代码继续执行,不管Server什么时候 ...

  2. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  3. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  4. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  5. js中ajax的异步性

    最近项目里遇到ajax异步性的问题,简化后的代码如下: function ajaxGetEvents(calendarView, time) { var year = time.getFullYear ...

  6. js中ajax异步导致的一些问题

    问题1:ajax默认是异步,所以在ajax中对外面定义的变量赋值,不能正确赋值 $("form").submit( var flag; $.ajax({ type: 'GET', ...

  7. js中Ajax工作原理(转)

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  8. js的线程和同步异步以及console.log机制

    项目上线了,闲下来就写写东西吧.积累了好多东西都没有做笔记~挑几个印象深刻的记录一下吧. js的同步异步以及单线程问题: 都知道单线程是js的一大特性.但是通常io(ajax获取服务器数据).用户/浏 ...

  9. jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

随机推荐

  1. 二、bootstrap缩略图幅

    一.bootstrap缩略图幅

  2. 网络编程NIO-异步

    异步I/O是没有阻塞地读写数据的方法.通常在代码进行read调用时,代码会阻塞直至可供读取的数据.同样,write调用将会阻塞直至数据能够写入. 1.selector是一个对象,可以注册到很多个cha ...

  3. 1、Fiddler 打断点 bpu

    一.fiddler 设置断点,可修改以下请求 可以修改HTTP请求头信息,如修改cookie,user-agent等 可以修改请求数据,突破表单限制,提交任意数字,如充值最大金额100,可修改为100 ...

  4. Java多线程状态切换

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11426573.html 线程状态 NEW RUNNABLE BLOCKED WAITING TIMED ...

  5. shell脚本编程测试类型上

    一bash的条件测试 判断某需求是否满足,需要由测试机制来实现.专用的测试表达式需要由测试命令辅助完成测试过程. 评估布尔声明,以便用在条件性执行中.若真,则返回0:若假,则返回1. 测试命令:• t ...

  6. bind-dns服务器搭建

    环境:主服务器上IP为192.168.159.30 安装相关包bind dns服务器  bind-utils提供nslookup dig等命令 yum -y install bind bind-uti ...

  7. IDEA @Override is not allowed when implementing interface method(转载)

    近期研究idea,在编码过程发现报错:@Override is not allowed when implementing interface method .找到一个老外的回答,感觉挺有用的,记录下 ...

  8. win10配置 samba

    一.先確認Linux中smb正確配置可以使用命令smbclient -L //localhost/ 二.win10配置1.打開win10對smb1.0/cifs檔共用支援2.本地群組原則編輯,修改如下 ...

  9. Angular 2 技能图谱skill-map

    # Angular 2 技能图谱 ## 模块 ### 自定义模块 - 根模块 - 特性模块 - 共享模块 - 核心模块 ### 内置模块 - ApplicationModule 模块 - Common ...

  10. Hive 窗口函数

    举例: row_number() over(partition by clue_id order by state_updated desc) 业务举例: select distinct a.clue ...