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 原型继承
Dec 26 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
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变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Vue实现web分页组件详解
2017/11/28 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Vue.js实现立体计算器
2020/02/22 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python实现复制整个目录的方法
2015/05/12 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python中logging日志库实例详解
2020/02/19 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
python中的错误如何查看
2020/07/08 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
回门宴答谢词
2014/01/13 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
致800米运动员广播稿
2014/02/16 职场文书
学历公证委托书
2014/04/09 职场文书
公务员诚信承诺书
2014/05/26 职场文书
初中差生评语
2014/12/29 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书