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

代码如下:

语法:
$(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调用,遍历,然后显示在前端.

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

赞 (0)

相关推荐

  • 使用jquery 的ajax调用总是错误亲测的解决方法

    使用jquery 的ajax功能调用一个页面,却发现总是出现错误. js代码如下 复制代码 代码如下: $.ajax({ type: 'post', url: 'TestData.aspx', data: { language_type: 'cn'}, dataType: 'json', success: function (data) { alert('ok'); }, error: function (data) { alert('err'); }); } TestData.aspx代码如下

  • jQuery调用AJAX时Get和post公用的乱码解决方法实例说明

    以前在新浪博客写过js调用AJAX时Get和post的乱码解决办法,但是使用js代码比较繁琐,我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jQuery. 一个网站的设计,不管是注册登录还是分页查找,都需要提交参数到服务器以便得到所需的页面数据.为了减少用户因刷新页面带来的煎熬,ajax诞生.但是初学者进行项目开发时,会遇到一个很烦人的问题:中文乱码. 下面我就通过一个简单的实例来告诉大家哪些地方可能会导致乱码,我们需要通过什么方式来解决. 我们这个实例主要实现用户注册时用户名

  • jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

    ws.aspx 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1&q

  • jquery.Ajax()方法调用Asp.Net后台的方法解析

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod]   public static string SayHello()   {        return "Hello Ajax!";   }  using System.Web.Script.Services; [WebMe

  • Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据

    一.WebService.asmx 处理业务数据,在GetWhether方法中产生天气情况数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //如果使用设计的组件,请取消注释以下行 //InitializeCompo

  • 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

    在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: 复制代码 代码如下: function ManageCommentText(text) {var result = text;$.ajax({data: "get",url: "GetComments.aspx",data: "typ

  • jQuery AJAX实现调用页面后台方法

    jQuery AJAX实现调用页面后台方法

    本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 1).无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!&q

  • jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

    jQuery AJAX实现调用页面后台方法和web服务定义的方法分享

    1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用.大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: 复制代码 代码如下: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: 复制代码 代码如下: $(functio

  • jquery中的ajax方法怎样通过JSONP进行远程调用

    关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js

  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

随机推荐