下面一个简单的例子,说明前后端交互中,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. Docker配置阿里云镜像加速pull

    前言:默认Docker拉取镜像是从Docker Hub上拉取,但由于防火墙的原因,导致镜像下载非常慢.为了提高拉取镜像的速度,可以配置阿里镜像或是网易镜像加速,通过使用经验推荐配置阿里镜像. 申请个人 ...

  2. linux-mysql-install

    版本是5.6之前的,安装MySQL步骤 yum install mysql-server 安装服务器端 yum install mysql-devel 安装服务器端 mysql配置文件/etc/my. ...

  3. idea maven打jar包

    双击clean install 会在根目录targer生成文件(注意删除test和替换yml文件)

  4. linux centos7 安装Phabircator

    Phabricator 是facebook开发的一套代码审核工具,基于PHP和Mysql开发. 准备工作: 系统:Linux CentOS7 环境: Apache(或nginx,或lighttpd): ...

  5. cerebro使用

    一.安装cerebro 上传插件到任意路径 tar zxvf 解压插件包 [root@ngsocdev14 es]# ls cerebro-0.8.3.zip software [root@ngsoc ...

  6. DMA实验总结

    一.RCC设置 没什么好写的之前USART的基本一样 /************************************************************************ ...

  7. spring boot2.x集成spring security5与druid1.1.13(一)

    版本:         spring boot 2.1.2.RELEASE         druid-spring-boot-starter 1.1.13 步骤:        一.maven    ...

  8. 【Java架构:基础技术】一篇文章搞掂:MyBatis

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文主要总结于刘增辉的<MyBatisc从入门到精通>一书,有兴趣的朋友可以自行研读 建议仔细研读官方文档: http ...

  9. symantec SMG 抓包

    1.使用putty连接SMG,先用admin账号登陆 执行set-support  , 设置一个密码. 2.重新打开一个putty连接SMG,使用support账号登陆.用我们刚才设置的密码. 3.开 ...

  10. StringUtils 方法全集

    最近做项目需要,经常需要最字符串进行拆分等操作,经搜索和研究,发现了一篇StringUtils方法全集的文章,不错,特贴出来,以后用: 参考:http://blog.sina.com.cn/s/blo ...