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


Posted in Javascript onJanuary 19, 2017

用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"); }
      });
    })
    })

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

Javascript 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
BootStrap中
Dec 10 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
javaScript基础详解
Jan 19 #Javascript
bootstrap css样式之表单
Jan 19 #Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 #Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 #Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 #Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 #Javascript
bootstrap组件之导航组件使用方法
Jan 19 #Javascript
You might like
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
深入理解Javascript中的this关键字
2015/03/27 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python应用库大全总结
2018/05/30 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python实现结构体代码实例
2020/02/10 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
实习自我鉴定模板
2013/09/28 职场文书
培训主管的岗位职责
2013/11/23 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
责任心演讲稿
2014/05/14 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2015年度物流工作总结
2015/04/30 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技