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实现页面自适应
Jan 19 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
javascript常用方法总结
May 14 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
点击进行复制的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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
实用函数5
2007/11/08 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
Json解析的方法小结
2016/06/22 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python3生成手写体数字方法
2018/01/30 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
房地产还款计划书
2014/01/10 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
安全教育感言
2014/03/04 职场文书
市场营销专业求职信
2014/06/17 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
五一劳动节活动总结
2015/02/09 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
创业计划书之服装
2019/10/07 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
Go语言并发编程 sync.Once
2021/10/16 Golang