下面一个简单的例子,说明前后端交互中,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. 选择器与过滤器(全)————JQ

    JQ基础--选择器与过滤器(全) JQ选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  2. go语言从例子开始之Example6.if/else

    if 和 else 分支结构在 Go 中当然是直接了当的了. package main import "fmt" func main() { 这里是一个基本的例子. if 7%2 ...

  3. RecyclerView跳转到指定位置的三种方式

    自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...

  4. matlab直接运行fig文件时报错

    Matlab里面所的程序都是以.m的脚本文件形式保存的,所有运行的都是m文件.所以,对于guide生成的GUI程序,打开的方式有两种: 一:打开.m文件,点击m文件上的运行按钮,会自动弹出figure ...

  5. Anaconda基本命令

    创建环境 conda create --name bunnies python=3 astroid babel 列出所有环境 conda info --envs 或 conda env list 克隆 ...

  6. [NOIP模拟测试31]题解

    A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...

  7. 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...

  8. 【数据库】一篇文章搞掂:MySQL数据库

    一.安装 使用版本:5.7(2018/08/03 阿里云的云数据库最高支持5.7,所以这里考虑用5.7) 下载版本:MySQL Community Server 5.7.23 下载地址:https:/ ...

  9. 【Spring Boot】Spring Boot项目部署到外部Tomcat容器

    一.修改项目打包方式为war包 修改pom.xml文件中packaging属性项 <packaging>war</packaging> 修改pom.xml文件增加一个依赖 &l ...

  10. 如何编写高性能的 javascript

    一.Javascript代码执行效率1. DOM1.1 使用 DocumentFragment 优化多次 append说明:添加多个 dom 元素时,先将元素 append 到 DocumentFra ...