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 面向对象 继承
May 13 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
javascript实现图片轮播代码
Jul 09 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实现MySQL更新记录的代码
2008/06/07 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php对称加密算法示例
2014/05/07 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
php随机抽奖实例分析
2015/03/04 PHP
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python属于解释型语言么
2020/06/15 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
家教广告词
2014/03/19 职场文书
岗位聘任书范文
2014/03/29 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
党风廉政建设心得体会
2019/05/21 职场文书