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 相关文章推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
微信小程序实现无限滚动列表
May 29 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue分页插件的使用方法
Dec 25 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
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
session在PHP大型web应用中的使用
2011/06/25 PHP
php curl的深入解析
2013/06/02 PHP
discuz目录文件资料汇总
2014/12/30 PHP
详解php中 === 的使用
2016/10/24 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
javascript中的this详解
2014/12/08 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python实现网页自动签到功能
2019/01/21 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
求职自荐信怎么写
2014/03/06 职场文书
民主评议党员工作总结
2014/10/20 职场文书
Python源码解析之List
2021/05/21 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Python加密技术之RSA加密解密的实现
2022/04/08 Python
Python实现聚类K-means算法详解
2022/07/15 Python