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 uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue 实现上传组件
May 31 Vue.js
基于JavaScript实现省市联动效果
Jun 22 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中养成7个面向对象的好习惯
2010/01/28 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
php函数式编程简单示例
2019/08/08 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
物理力学求职信
2014/02/18 职场文书
法律进学校实施方案
2014/03/15 职场文书
部门年终奖分配方案
2014/05/07 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL