ajax与json 获取数据并在前台使用简单实例

 更新时间:2017年01月19日 14:58:47   投稿:lqh  
这篇文章主要介绍了ajax与json 获取数据并在前台使用简单实例的相关资料,需要的朋友可以参考下

用ajax获取后台数据,返回json数据,怎么在前台使用呢?

后台


if (dataType == "SearchCustomer")
        {
          int ID;
          if (Int32.TryParse(CustomerID, out ID))
          {
            string s = GridComputer.GridCustomer.getCustomer(1, 1, ID);
            if (s == null)
            {
              context.Response.ContentType = "text/plain";
              context.Response.Write("[{\"name\":无用户,\"id\":\"0\",\"company\":\"无用户\"}]");
            }
            else { context.Response.Write(s); }
          }
 
        } 

前台


 $(document).ready(function () {
      $("#Button3").click(
    function (SucCallback) {
      $.ajax(
      {
        type: "get",
        url: 'GridDatas.ashx', //后台处理程序  
        dataType: 'json',   //接受数据格式  
        data: 'DataType=SearchCustomer&CustomerID=' + document.getElementById("Text3").value,     //要传递的数据  
        success:SucCallback,
        error: function () { alert("error"); }
      });
    })
    })

参考代码

grid.getCustomer(1,2,function (data) {
    var list = '<p>' + tree_GridInfo._name + '的用户有</p><br>';
    list += '<table id="customers"><tr><th>姓名</th><th>电话</th></tr> ';
    $.each(data, function (i, n) {
      list += '<tr onclick="showUser(' + 1 + ')"><td>';
      list += n.name + '</td>' + '<td>' + n.company;
      list += '</td></tr>';
    });
    $("#SearchResult").html(list)

看你的json数据是列表还是单个了,就一条就无需中括号了

context.Response.Write("{\"name\":无用户,\"id\":\"0\",\"company\":\"无用户\"}");

$(document).ready(function () {
      $("#Button3").click(
    function (SucCallback) {
      $.ajax(
      {
        type: "get",
        url: 'GridDatas.ashx', //后台处理程序  
        dataType: 'json',   //接受数据格式  
        data: 'DataType=SearchCustomer&CustomerID=' + document.getElementById("Text3").value,     //要传递的数据  
        function (dataJson) {
           alert(dataJson.Name);
           alert(dataJson.Id);
        },
        error: function () { alert("error"); }
      });
    })
    })

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • jQuery实现大转盘抽奖活动仿QQ音乐代码分享

    jQuery实现大转盘抽奖活动仿QQ音乐代码分享

    这篇文章主要展示了jQuery实现大转盘抽奖活动仿QQ音乐实现代码,需要的朋友可以参考下
    2015-08-08
  • jquery序列化表单以及回调函数的使用示例

    jquery序列化表单以及回调函数的使用示例

    使用jQuery提供的表单序列化方法可以很好的解决JSP表单中一个个传值的问题,下面有个示例,大家可以参考下
    2014-07-07
  • jqPlot 基于jquery的画图插件

    jqPlot 基于jquery的画图插件

    jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的图表样式。
    2011-04-04
  • jQuery取消特定的click事件

    jQuery取消特定的click事件

    这篇文章主要介绍了jQuery取消特定的click事件实现方法,结合实例形式分析了jQuery简单实现事件绑定及取消事件绑定的相关技巧,需要的朋友可以参考下
    2016-02-02
  • jQuery Validate 数组 全部验证问题

    jQuery Validate 数组 全部验证问题

    这篇文章主要介绍了jquery validate 数组 全部验证问题及解决办法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery插件HighCharts绘制2D圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制圆环图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • jQuery冲突问题解决方法

    jQuery冲突问题解决方法

    在本篇文章里小编给大家整理的是一篇关于jQuery冲突问题解决方法,有兴趣的朋友们可以学习下。
    2021-01-01
  • 在myeclipse中如何加入jquery代码提示功能

    在myeclipse中如何加入jquery代码提示功能

    这篇文章主要介绍了在myeclipse中如何加入jquery代码提示功能,需要的朋友可以参考下
    2014-06-06
  • jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式,需要的朋友一起看看吧
    2016-06-06
  • jQuery实现碎片轮播效果

    jQuery实现碎片轮播效果

    这篇文章主要为大家详细介绍了jQuery实现碎片轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论