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 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
关于vue-router路径计算问题
May 10 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
如何实现双向绑定mvvm的原理实现
May 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
取选中的radio的值
2010/01/11 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Vue之Watcher源码解析(2)
2017/07/19 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
人力资源专业推荐信
2013/11/29 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
售票员岗位职责
2015/02/15 职场文书
公司行政管理制度范本
2015/08/05 职场文书
MySQL 数据类型详情
2021/11/11 MySQL