在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

在实际应用中,可以这么应用,一个方法进行获取数据源,另一个方法(回调函数)可以通过数据源在页面上进行展示,可以根据具体的需求进行展示就行,如果多个地方用到这个数据源,可以写不同的回调函数,将此函数传入这个方法中即可。

来,咱们通过实例可以一目了然

获取公司信息的小例子

1、获取公司信息数据源的方法(参数 url 为访问的地址,paramsObj为传递的参数对象,callback 为回调函数)

function getList(url, paramsObj, callback) {
$.ajax({
type: "Post",
url: url,
dataType: "json",
data: JSON.stringify({
paramsObj: JSON.stringify(paramsObj)
}),
contentType: "application/json;charset-utf-8",
success: function (data) {
callback(data);
}
});
}

2、后台调用数据的方法

public class CompanyController : Controller
{
//
// GET: /Company/ public ActionResult Index()
{
return View();
} [HttpPost]
public ActionResult GetCompanyList(string paramsObj)
{
JavaScriptSerializer Serializer = new JavaScriptSerializer();
var items = Serializer.Deserialize<Company>(paramsObj); List<Company> list = new List<Company>();
list.Add(new Company { ID = , Name = "公司一" });
list.Add(new Company { ID = , Name = "公司二" });
list.Add(new Company { ID = , Name = "公司三" }); return Json(list);
} }

3、回调函数的方法,这里写了两个可以作为回调函数(一个用于将table展示到页面上,另一个以弹出框的形式展现)

function buildHtml(data) {
var strHtml = "";
strHtml += "<table>";
for (var i = 0; i < data.length; i++) {
strHtml += "<tr>";
strHtml += "<td>" + data[i].ID + "</td>";
strHtml += "<td>" + data[i].Name + "</td>";
strHtml += "</tr>";
}
strHtml += "</table>"; $("#divTable").html(strHtml);
}
function alertHtml(data) {
var strHtml = "";
strHtml += "<table>";
for (var i = 0; i < data.length; i++) {
strHtml += "<tr>";
strHtml += "<td>" + data[i].ID + "</td>";
strHtml += "<td>" + data[i].Name + "</td>";
strHtml += "</tr>";
}
strHtml += "</table>"; alert(strHtml);
}

4、页面调用

$(document).ready(function () {
//get(); var url = "/Company/GetCompanyList";
var paramsObj = { ID: 3, Name: "ck" }; var com = new Company(33, "123456");
com.GetCompany(url, paramsObj);
}); function Company(ID,Name)
{
this.ID = ID;
this.Name = Name;
}
Company.prototype.GetCompany = function (url, paramsObj) { getList(url, paramsObj, buildHtml); getList(url, paramsObj, alertHtml);
}

最后整理一下,页面全部代码如下:

@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () {
//get(); var url = "/Company/GetCompanyList";
var paramsObj = { ID: 3, Name: "ck" }; var com = new Company(33, "123456");
com.GetCompany(url, paramsObj);
}); function Company(ID,Name)
{
this.ID = ID;
this.Name = Name;
}
Company.prototype.GetCompany = function (url, paramsObj) { getList(url, paramsObj, buildHtml); getList(url, paramsObj, alertHtml);
} function getList(url, paramsObj, callback) {
$.ajax({
type: "Post",
url: url,
dataType: "json",
data: JSON.stringify({
paramsObj: JSON.stringify(paramsObj)
}),
contentType: "application/json;charset-utf-8",
success: function (data) {
callback(data);
}
});
} function buildHtml(data) {
var strHtml = "";
strHtml += "<table>";
for (var i = 0; i < data.length; i++) {
strHtml += "<tr>";
strHtml += "<td>" + data[i].ID + "</td>";
strHtml += "<td>" + data[i].Name + "</td>";
strHtml += "</tr>";
}
strHtml += "</table>"; $("#divTable").html(strHtml);
} function alertHtml(data) {
var strHtml = "";
strHtml += "<table>";
for (var i = 0; i < data.length; i++) {
strHtml += "<tr>";
strHtml += "<td>" + data[i].ID + "</td>";
strHtml += "<td>" + data[i].Name + "</td>";
strHtml += "</tr>";
}
strHtml += "</table>"; alert(strHtml);
} </script> <h2>Index</h2> <div id="divTable" style="width:500px; height:300px;"> </div>

JavaScript中回调函数的使用的更多相关文章

  1. Javascript中回调函数的学习笔记

    function a_b(kkis){ document.body.style.background ='red'; kkis(); } function fli(){ alert('######## ...

  2. Javascript之回调函数(callback)

    1.回调函数定义: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方 ...

  3. 告诉你什么是javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.F ...

  4. JavaScript Callback 回调函数

    JavaScript callback回调函数 你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货.在这 ...

  5. 深入理解JavaScript中的函数操作——《JavaScript忍者秘籍》总结

    匿名函数 对于什么是匿名函数,这里就不做过多介绍了.我们需要知道的是,对于JavaScript而言,匿名函数是一个很重要且具有逻辑性的特性.通常,匿名函数的使用情况是:创建一个供以后使用的函数.简单的 ...

  6. javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.F ...

  7. 如何理解JavaScript中的函数

    转: 如何理解JavaScript中的函数 JS中的函数简介 JS中的函数是一种通过调用来完成具体业务的一段代码块.最核心的目的是将可重复执行的操作进行封装,然后供调用方无限制的调用. JS中的函数的 ...

  8. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  9. $.getJSON('url',function(data){}) 中回调函数不执行

    $.getJSON('url',function(data){}) 中回调函数不执行 url 中的 json 格式不正确 ,浏览器返回并没有报错 {'湖北':[114.11438,30.849429] ...

随机推荐

  1. ZOJ 1240 IBM Minus One

    /* You may have heard of the book '2001 - A Space Odyssey' by Arthur C. Clarke, or the film of the s ...

  2. ZOJ 1016 Parencodings

    原题链接 题目大意:有两串数字P和W.数组P中,数字P[i]表示第i个右括号之前的左括号个数.数组W中,数字W[i]表示在第i个右括号和与它匹配的左括号之间的右括号的个数(包括本身).给出一个数组P, ...

  3. PHP新手入门1——表单

    注:本身是Android,Android之前是java.但公司后台PHP特别多.就好奇php后台是怎么通过一个url给我数据的(完全不懂php).于是就学呗.学习系列随笔第一人称是一个Android小 ...

  4. Fragment中调用Activity的UI

    1:Fragment内定义一个接口,或外部定义一个接口, 2:Fragment定义一个接口对象的属性 3:Activity实现这个接口 4:Fragment的onAttach方法中强转Activity ...

  5. SQL注入测试平台 SQLol -6.CHALLENGES挑战

    SQLol上面的挑战共有14关,接下来我们一关一关来突破. Challenge 0 目的是让查询返回所有的用户名,而不是只有一个. SELECT username FROM users WHERE u ...

  6. 《jave程序设计》第一周学习总结

    <JAVA程序设计>第一周学习总结 教材学习内容总结 在第一周的学习中,我初次认识了JAVA程序的一些基础知识.我发现了很多问题 问题就是自己的代码编写出现了一点问题,符号和单词的大小写都 ...

  7. 【NOIP2013】华容道

    看别人的代码然后被坑了一下午+一晚上,睡一觉第二天醒悟过来打表过了 果然打表才是正确的调试方法,跟踪什么的去屎(╯‵□′)╯︵┻━┻ 原题: 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成 ...

  8. Android TouchEvent事件传递机制

    本文转载自:http://blog.csdn.net/morgan_xww/article/details/9372285 跟touch事件相关的3个方法: public boolean dispat ...

  9. java的nio之:java的nio系列教程之channel的数据交换

    在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel(译者注:channel中文常译作通道)传输到另外一个channel. transferFro ...

  10. 在Windows7上安装coreseek3.2同时在PHP下简单实现步骤

    这两天安装了coreseek+sphinx服务,前面装的是比较低版本的,再试了一下官网比较稳定一个版本1.首先下载:因为包有点大,就不在这里增加链接了,需要可以到官网下载 coreseek-3.2.1 ...