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 相关文章推荐
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
js消除图片小游戏代码
Dec 11 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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代码
2013/11/19 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php array_map()函数实例用法
2021/03/03 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
document.getElementById介绍
2011/09/13 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
Python socket编程实例详解
2015/05/27 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python 复平面绘图实例
2019/11/21 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
毕业生医学检验求职信
2013/10/16 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
诚信考试承诺书
2014/03/27 职场文书
合理化建议书
2015/02/04 职场文书
试用期辞职信范文
2015/03/02 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
行政诉讼答辩状
2015/05/21 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
2015年暑假生活总结
2015/07/13 职场文书
《童年的发现》教学反思
2016/02/18 职场文书