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 07 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
详解Next.js页面渲染的优化方案
Jan 27 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验证码实现代码
2014/05/10 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
Javascript算符的优先级介绍
2013/03/20 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
python快速排序代码实例
2013/11/21 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python中bytes和str类型的区别
2019/10/21 Python
python返回数组的索引实例
2019/11/28 Python
土木工程应届生求职信
2013/10/31 职场文书
办理退休介绍信
2014/01/09 职场文书
幼儿园家长评语
2014/02/10 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python