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 01 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
checkbox使用示例
Aug 23 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
点击进行复制的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
adodb与adodb_lite之比较
2006/12/31 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
javascript的内存管理详解
2013/08/07 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
汽车检测与维修专业求职信
2013/10/30 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
策划主管的工作职责
2013/11/24 职场文书
《我的信念》教学反思
2014/02/15 职场文书
开学典礼主持词
2014/03/19 职场文书
作风整顿剖析材料
2014/09/30 职场文书
整改报告怎么写
2014/11/06 职场文书
《日月潭》教学反思
2016/02/20 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫