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学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
Smarty保留变量用法分析
2016/05/23 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python之生产者消费者模型实现详解
2019/07/27 Python
彻底解决Python包下载慢问题
2020/11/15 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
《狮子和兔子》教学反思
2014/03/02 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
总经理岗位职责范本
2015/04/01 职场文书
财务统计员岗位职责
2015/04/14 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
公司员工手册范本
2015/05/14 职场文书
教师节联欢会主持词
2015/07/04 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
Redis实现分布式锁的五种方法详解
2022/06/14 Redis