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字典探测用户名工具
Oct 05 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
基于Angularjs实现分页功能
May 30 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
ES5新增数组的实现方法
May 12 Javascript
详解Vite的新体验
Feb 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 中文和编码判断代码
2010/05/16 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue数组对象排序的实现代码
2018/06/20 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
浅析matlab中imadjust函数
2020/02/27 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
质检员岗位职责
2013/12/17 职场文书
关于逃课的检讨书
2014/01/23 职场文书
大型晚会策划方案
2014/02/06 职场文书
中学生运动会口号
2014/06/07 职场文书
统计学教授推荐信
2014/09/18 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
80后婚前协议书范本
2014/10/24 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers