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下的keyCode键码值表
Apr 10 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Express框架之connect-flash详解
May 31 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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环境――Appserv
2006/12/13 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
学校教师安全责任书
2014/07/23 职场文书
户籍证明格式
2014/09/15 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
小人国观后感
2015/06/11 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技