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版代码高亮
Jun 26 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 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 session 检测和注销
2009/03/16 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php导出excel格式数据问题
2014/03/11 PHP
Yii框架form表单用法实例
2014/12/04 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
骨干教师事迹材料
2014/12/17 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
python实现批量移动文件
2021/04/05 Python