jquery利用ajax调用后台方法实例


Posted in Javascript onAugust 23, 2013
语法:
$(function(){
    var callback = function(r){  //r表示后台数据返回的数据.
    }
    $.get("",callback);   //引号里面写方法的路径
});

这样就可以得到后台方法得到的数据显示在html前端了.

以下是工作中写的一段js和后台方法:

js:

$(function(){
    var callback = function (r) {
        var data = "<marquee width='853;' height='250px;' scrollamount='2' scrolldelay='4' direction='up' behavior='loop' onmouseout='this.start()' onmouseover='this.stop()'><ul>"
        var data2 = "<div class='marquee_div'><span onclick='closeList()'><img src='Images/关闭icon.png' class='closeImg ml_fix_png' /></span>优惠名单</div>";
        for (var i = 0; i < r.length; i++) {
            data += ("<li><label>" + r[i].time + "</label><span>" + r[i].CustomerName + "</span>申请试用成功获得购买年服务年费9折优惠,恭喜!</li>");
        }
        data += "</marquee></ul>";
        $("#01_companys").html(data);
        var t_data2 = "";
        for (var i = 0; i < r.length; i++) {
            if (i % 2 == 0) {
                t_data2 += "</div><div class='listTitle'>";
            }
            t_data2 += "<div style='width:49%; height:40px; line-height:40px; float:left'>" + (i + 1) + "." + r[r.length - i - 1].CustomerName + "</div>";
        }
        $("#01_list").html(data2 + (t_data2.length > 0 ? t_data2.substr(6, t_data2.length - 6) : "") + "</div>");
    }
    $.get("/activity/trycompany", callback);
});

后台代码(mvc4):
public ActionResult TryCompany()
        {
            string CustomerType = Res.CustomerType.TestCustomer.ToString();
            IList<Customers> vlist = o_Res.GetHtmlCustomers(1, 100, out pCount, (a => a.CustomerType == CustomerType));
            var list = vlist.ToList().ConvertAll(s =>
            {
                return new { s.CustomerName, time = s.AddDate.HasValue ? s.AddDate.Value.ToString("MM-dd HH:mm") : "" };
            });
            return Json(list, JsonRequestBehavior.AllowGet);
        }

后台得到一个list,jq调用,遍历,然后显示在前端.

一个很简单的例子,肯定还有更简单的办法,等以后来挖掘.

Javascript 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
vue filters的使用详解
Jun 11 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
点击进行复制的JS代码实例
Aug 23 #Javascript
关于JS中的闭包浅谈
Aug 23 #Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 #Javascript
仿百度输入框智能提示的js代码
Aug 22 #Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 #Javascript
JavaScript中的eval()函数详解
Aug 22 #Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php下封装较好的数字分页方法
2010/11/23 PHP
php实现json编码的方法
2015/07/30 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python读写docx文件的方法
2018/05/08 Python
Python 变量类型详解
2018/10/10 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Python线程threading模块用法详解
2020/02/26 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python自动化办公操作PPT的实现
2021/02/05 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
科研先进个人典型材料
2014/01/31 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript