none
请教JQuery-Ajax问题 RRS feed

答案

  • 你好,

    Jqery中ajax方法使用如下:

     $.ajax({
            data: "id=" +'<%=Model.Id %>',
            type: "post",
            url: "/Home/ApplyJob",
            dataType: "json",
            success: function(result) { applySucced(result); }
          });

    传递数据时data以名-值键对的方式传递就行了,就像通过url传递数据的时候数据传递方式:data:"name1=value1&name2=value2"

    后台序列化的List<>,table集合等对象在前台都是数组的方式,访问时可以采用如下方式collection[0].Property.

    具体怎么样的你可以调试脚本查看。


    Microsoft Online Community Support
    2010年6月21日 5:25
  • 先请弄清楚概念,ajax中的javascript是在客户端执行的代码,它需要服务端的程序配合来共同完成。

    关于jQuery的ajax可以到官方文档(http://api.jquery.com/category/ajax/)里面仔细仔细仔细地看N遍,例子也要自己动手试验过。

    最简单的ajax比如获取服务端某页面的输出,则客户端js代码为:

    $.get('serverside.aspx',function(data){
     alert(data);//这个data就是serverside.aspx的输出内容。
    });

    再深入一点,如何获取后台返回的一个List<string>?则需要对后台方法和代码进行一些更改。

    在ServerSide.aspx.cs声明一个供前台ajax调用的方法:

    [WebMethod]
    public static List<string> GetNames()
    {
      return new List<string> { "Me", "He", "She", "Another", "UFO", "ETPhoneHome" };
    }
    

    前台页面的脚本里有一个按钮,它的客户端ID为btnGetNames。则脚本需要这样写:

    $('#btnGetNames').click(function(e) {
      e.preventDefault();
    
      $.ajax({
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        url: 'ServerSide.aspx/GetNames',
        success: function(r) {//r就是返回的数据,列表已经被序列化成了一个js中的array,存在属性d当中。
          $(r.d).each(function(i, item) {
            alert(item);//item就是每一项列表元素。
          });
        },
        error: function(xhr) {
          alert('error: ' + xhr.statusText);//出错时ajax会返回XMLHttp对象。
        }
      });
    });
    

    以上是从服务端获取数据到客户端,要提交客户端的数据到服务端,需要给服务端方法定义参数,然后在ajax代码里指定参数的值。请参考:

    [WebMethod]
    public static bool UpdateSelected(string names)
    {
      //Me,He,She,Another,UFO,ETPhoneHome
      return string.IsNullOrEmpty(names);
    }
    

    服务端方法定义了一个names的字符串参数,返回bool值,那么客户端ajax代码是:

    $('#btnUpdateNames').click(function(e) {
      e.preventDefault();
    
      //获取所有li元素的内容。
      var t = $.map($('li'), function(item) {
        return $(item).html();
      });
    
      $.ajax({
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        data: '{names:"' + t.toString() + '"}',//注意这里拼接data参数的值
        url: 'default.aspx/UpdateSelected',
        success: function(r) {
          alert(r.d);
        },
        error: function(xhr) {
          alert('error: ' + xhr.statusText);
        }
      });
    });
    

    这里比上面多了一个data参数,它的值就是按照json格式来给服务端传递参数,名称必须是服务端定义的参数名,值要用字符串的方式传递,到后台代码里就是逗号分隔的一个字符串了。

    希望对你有帮助:)


    Facing problems, think first, then search, finally ask.
    2010年6月23日 7:13
    版主
  • 如果是JSON的.可以使用JSON.net进行序列化/反序列化.

    详细参考.http://www.dotnetdev.cn/2010/01/c中的json的序列化和反序列化/

    可以将IList<T>转换成String的JSON格式返回客户端.再用eval解析成JSON对象即可

    注意:

    $.ajax({
      type: 'POST',
      contentType: 'application/json;charset=utf-8',
      dataType: 'json',
      url: 'ServerSide.aspx/GetNames',
      success: function(r) {//r就是返回的数据,列表已经被序列化成了一个js中的array,存在属性d当中。
       $(r.d).each(function(i, item) {
        alert(item);//item就是每一项列表元素。
       });
      },
      error: function(xhr) {
       alert('error: ' + xhr.statusText);//出错时ajax会返回XMLHttp对象。
      }
     });
    你后台接受不到数据.可能是你的contentType没设置好.自己多做些实验.

    2010年6月24日 11:26

全部回复

  • 网上的asp.net的例子实在太少
    都是一些简单的操作!
    希望能给出例子!谢谢!


    付出不一定有回报,不付出那就一定没有回报!
    2010年6月19日 2:34
  • 大虾们进啊!

    求教啊!


    付出不一定有回报,不付出那就一定没有回报!
    2010年6月20日 12:51
  • 你好,

    Jqery中ajax方法使用如下:

     $.ajax({
            data: "id=" +'<%=Model.Id %>',
            type: "post",
            url: "/Home/ApplyJob",
            dataType: "json",
            success: function(result) { applySucced(result); }
          });

    传递数据时data以名-值键对的方式传递就行了,就像通过url传递数据的时候数据传递方式:data:"name1=value1&name2=value2"

    后台序列化的List<>,table集合等对象在前台都是数组的方式,访问时可以采用如下方式collection[0].Property.

    具体怎么样的你可以调试脚本查看。


    Microsoft Online Community Support
    2010年6月21日 5:25
  • 怎么向后台传“序列化”后的数据呢?


    付出不一定有回报,不付出那就一定没有回报!
    2010年6月22日 7:14
  • 先请弄清楚概念,ajax中的javascript是在客户端执行的代码,它需要服务端的程序配合来共同完成。

    关于jQuery的ajax可以到官方文档(http://api.jquery.com/category/ajax/)里面仔细仔细仔细地看N遍,例子也要自己动手试验过。

    最简单的ajax比如获取服务端某页面的输出,则客户端js代码为:

    $.get('serverside.aspx',function(data){
     alert(data);//这个data就是serverside.aspx的输出内容。
    });

    再深入一点,如何获取后台返回的一个List<string>?则需要对后台方法和代码进行一些更改。

    在ServerSide.aspx.cs声明一个供前台ajax调用的方法:

    [WebMethod]
    public static List<string> GetNames()
    {
      return new List<string> { "Me", "He", "She", "Another", "UFO", "ETPhoneHome" };
    }
    

    前台页面的脚本里有一个按钮,它的客户端ID为btnGetNames。则脚本需要这样写:

    $('#btnGetNames').click(function(e) {
      e.preventDefault();
    
      $.ajax({
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        url: 'ServerSide.aspx/GetNames',
        success: function(r) {//r就是返回的数据,列表已经被序列化成了一个js中的array,存在属性d当中。
          $(r.d).each(function(i, item) {
            alert(item);//item就是每一项列表元素。
          });
        },
        error: function(xhr) {
          alert('error: ' + xhr.statusText);//出错时ajax会返回XMLHttp对象。
        }
      });
    });
    

    以上是从服务端获取数据到客户端,要提交客户端的数据到服务端,需要给服务端方法定义参数,然后在ajax代码里指定参数的值。请参考:

    [WebMethod]
    public static bool UpdateSelected(string names)
    {
      //Me,He,She,Another,UFO,ETPhoneHome
      return string.IsNullOrEmpty(names);
    }
    

    服务端方法定义了一个names的字符串参数,返回bool值,那么客户端ajax代码是:

    $('#btnUpdateNames').click(function(e) {
      e.preventDefault();
    
      //获取所有li元素的内容。
      var t = $.map($('li'), function(item) {
        return $(item).html();
      });
    
      $.ajax({
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        data: '{names:"' + t.toString() + '"}',//注意这里拼接data参数的值
        url: 'default.aspx/UpdateSelected',
        success: function(r) {
          alert(r.d);
        },
        error: function(xhr) {
          alert('error: ' + xhr.statusText);
        }
      });
    });
    

    这里比上面多了一个data参数,它的值就是按照json格式来给服务端传递参数,名称必须是服务端定义的参数名,值要用字符串的方式传递,到后台代码里就是逗号分隔的一个字符串了。

    希望对你有帮助:)


    Facing problems, think first, then search, finally ask.
    2010年6月23日 7:13
    版主
  • data: '{names:"' + t.toString() + '"}',//注意这里拼接data参数的值
    假如我传入后台的是序列化字符串

    var aa = '{"a":"1","b":2}'
    data: '{JosnStr:"' + aa + '"}'

    后台就接收不到


    付出不一定有回报,不付出那就一定没有回报!
    2010年6月24日 0:27
  • 既然你有2个变量,后台方法也应该定义成接受两个参数,且参数名称分别是a和b,再根据你的aa的定义来看,a是字符串,b是整数。

    [WebMethod]
    public static string GetPostedData(string a, int b){
      return a;//blahblah
    }

    那么data的格式应该是:

    data:'{a:"1",b:2}',
    你为什么不自己试试呢?
    Facing problems, think first, then search, finally ask.
    2010年6月24日 6:16
    版主
  • 既然你有2个变量,后台方法也应该定义成接受两个参数,且参数名称分别是a和b,再根据你的aa的定义来看,a是字符串,b是整数。

    [WebMethod]
    
    public static string GetPostedData(string a, int b){
    
     return a;//blahblah
    
    }
    
    

    那么data的格式应该是:

    data:'{a:"1",b:2}',
    
    
    你为什么不自己试试呢?
    Facing problems, think first, then search, finally ask.

    假如现在有N个a或者b、c、d..怎么办?

     


    付出不一定有回报,不付出那就一定没有回报!
    2010年6月24日 11:20
  • 如果是JSON的.可以使用JSON.net进行序列化/反序列化.

    详细参考.http://www.dotnetdev.cn/2010/01/c中的json的序列化和反序列化/

    可以将IList<T>转换成String的JSON格式返回客户端.再用eval解析成JSON对象即可

    注意:

    $.ajax({
      type: 'POST',
      contentType: 'application/json;charset=utf-8',
      dataType: 'json',
      url: 'ServerSide.aspx/GetNames',
      success: function(r) {//r就是返回的数据,列表已经被序列化成了一个js中的array,存在属性d当中。
       $(r.d).each(function(i, item) {
        alert(item);//item就是每一项列表元素。
       });
      },
      error: function(xhr) {
       alert('error: ' + xhr.statusText);//出错时ajax会返回XMLHttp对象。
      }
     });
    你后台接受不到数据.可能是你的contentType没设置好.自己多做些实验.

    2010年6月24日 11:26
  • 值非常多但是类型一样的话,可以参考我前面一个帖子。相关代码是: 

     //获取所有li元素的内容。
     var t = $.map($('li'), function(item) {
      return $(item).html();
     });

    $.map就是对一个列表每个元素执行后面的function,然后返回到数组t里面。后面调用t.toString()的时候这个列表就会自动转换成a,b,c,d,e这样用逗号分隔的格式,后台代码再去分析转换即可。

    同样,要返回List<T>,我前面也给过例子了。


    Facing problems, think first, then search, finally ask.
    2010年6月24日 15:44
    版主