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 效果使用详解

    Jquery 效果使用详解

    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便,本篇文章给大家介绍jquery效果使用详解,感兴趣的朋友一起学习吧
    2015-11-11
  • 深入理解jQuery中live与bind方法的区别

    深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 当jquery ajax遇上401请求的解决方法

    当jquery ajax遇上401请求的解决方法

    下面小编就为大家带来一篇当jquery ajax遇上401请求的解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery实现图片上传前本地预览

    jquery实现图片上传前本地预览

    这篇文章主要为大家详细介绍了jquery实现图片上传前本地预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 基于jquery实现的文字淡入淡出效果

    基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下
    2013-11-11
  • jQuery on()绑定动态元素出现的问题小结

    jQuery on()绑定动态元素出现的问题小结

    jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下
    2016-02-02
  • jQuery实现邮箱下拉列表自动补全功能

    jQuery实现邮箱下拉列表自动补全功能

    在一些网站我们经常看到当我们要输入邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助我们自动补全邮箱,怎么实现的呢?今天下面给大家分享基于jquery实现邮箱下拉列表自动补全功能,一起看看吧
    2016-09-09
  • jQuery中bind与live的用法及区别小结

    jQuery中bind与live的用法及区别小结

    本篇文章主要是对jQuery中bind与live的用法以及区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 浅谈jquery上下滑动的注意事项

    浅谈jquery上下滑动的注意事项

    下面小编就为大家带来一篇jquery上下滑动的注意事项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jquery 实现两级导航菜单附效果图

    jquery 实现两级导航菜单附效果图

    两级导航菜单在网页中非常实用,实现的方法也有很多,本文为大家介绍下使用jquery是如何实现的
    2014-03-03

最新评论