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 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
理解javascript中的with关键字
Feb 15 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
基于postman获取动态数据过程详解
Sep 08 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
PHP写日志的实现方法
2014/11/05 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
js获取class的所有元素
2013/03/28 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
js中生成map对象的方法
2014/01/09 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JavaScript中Function详解
2015/02/27 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
python错误处理详解
2014/09/28 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python实现tail -f 功能
2020/01/17 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
消防安全责任书范本
2014/04/15 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
股票投资建议书
2014/05/19 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
公司慰问信范文
2015/03/23 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书