上一篇《ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据》写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询。接下来就写一个前台table通过ajax  Json 获取值。下面是要实现的效果

每次写博客我都是以一个初学者来看的态度去写,语文也不用合格所有写的有点凌乱。大家看得懂就行,不明白的留言。

1、先来看看前台html页面    查询出来的结果是拼接table上去的

        <div class="yjcxdiv"><p class="cxancss"><span>登记人电话:</span><input class="txtwenben" type="number" maxlength="11" id="txtphone" name="txtanme" placeholder="请输入完整的11位电话号码" /><button class="btncxan" id="btnchaxun" name="btnchaxun">查询</button></p><div class="yjdjlist"><table id="tttab"><tr id="yjdjtrone"><td id="yyxh">序号</td><td id="yyname">仪检名称</td><td id="yyxh">规格型号</td><td id="yybh">出厂编号</td><td id="yydate">登记日期</td><td id="yyperson">登&nbsp;记&nbsp;&nbsp;人</td><td id="yyphone">联系电话</td><td id="yystate" style="color:red; font-size:14px;font-weight:600;">审核状态</td></tr></table></div></div>

2、记得添加jQuery文件,下面是js,  样式的话自己去调节咯

<script type="text/javascript">$(document).ready(function () {$("#btnchaxun").click(function () {//插叙按钮的单击事件var item = "";//定义拼接table字符串$("#tttab tr").remove();//这里是为了第二次查询前面插叙的数据清空$("#tttab").append("<tr id='yjdjtrone'><td id='yyxh'>序号</td><td id='yyname'>仪检名称</td><td id='yyxh'>规格型号</td><td id='yybh'>出厂编号</td><td id='yydate'>登记日期</td><td id='yyperson'>登&nbsp;记&nbsp;&nbsp;人</td><td id='yyphone'>联系电话</td><td id='yystate' style='color:red; font-size:14px;font-weight:600;'>审核状态</td></tr>");          //拼接表格头var _sqltj = $("#txtphone").val();//获取查询条件等下作为参数提交到后台$.ajax({type: "post",url: "{config.webpath}tools/instrumentlookup_ajax.ashx",//这个提交的路径记住是一个ashx的页面  不是aspx页面data: { sqltj: _sqltj },//传的参数success: function (tt) {//成功的函数  里面的tt就是执行成功返回来的string  为什么说是string类型呢  等下到后台再看var data = JSON.parse(tt);把传过来的字符串转化为一个对象 jsonalert(tt);//这个是测试的$.each(data, function (i, s) {//循环赋值到table中item = "<tr><td>" + (i + 1) + "</td><td>" + s['Name'] + "</td> <td>" + s['Modle'] + "</td> <td>" + s['Number'] + "</td><td>" + s['ADDTIME'] + "</td><td>" + s['Person'] + "</td><td>" + s['Phone'] + "</td><td>" + s['Status'] + "</td></tr>"$("#tttab").append(item);//拼接表格})},error: function () {alert("程序异常!查询出错"); return;}});});});</script>

大家可能疑惑ajax为啥没有指定dataType是json  我试过 那是不对的  因为后台处理后不是json传过来的

3、从后台数据库获取数据,我用的是原始的方法网站这里只需要查询这一点就不弄那么麻烦了

using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using Newtonsoft.Json;
//这是添加的命名空间public void ProcessRequest(HttpContext context){var tj =HttpContext.Current.Request["sqltj"];//接收过来的查询条件参数string _sql = string.Format(@"select Name,Modle,Number,CONVERT(varchar(100),AddTime,23) AS ADDTIME,Person,Phone,(case Status when '0' then '未审核' when '1' then '通过审核'  else '其他' end) AS Status from InstrumentCheck where Phone ='{0}'", tj.ToString()); ;context.Response.ContentType = "text/plain";SqlConnection conn = new SqlConnection();conn.ConnectionString = connectionStringgg;if(conn.State==ConnectionState.Closed){conn.Open();}SqlCommand cmd = new SqlCommand();cmd.CommandText = _sql;cmd.Connection=conn;SqlDataAdapter sda = new SqlDataAdapter();sda.SelectCommand = cmd;DataSet ds = new DataSet();sda.Fill(ds);    context.Response.Write(JsonConvert.SerializeObject( ds.Tables[0]));}

后台这里记得一定要写在ProcessRequest(HttpContext context)这个方法里,你可以自己写一个方法在通过自己的处理到你写的方法里(我试过很麻烦的) 调用的路径他只会找到ProcessRequest(HttpContext context)这个方法所以写在里面就可以啦!这里要添加一个Json的处理dll文件Newtonsoft.Json.dl下载(需要的朋友单击链接下载)然后在程序集添加。

鼠标放在JsonConvert.SerializeObject( ds.Tables[0])这个方法上看你会发现它string类型的

我把字符串复制出来

[{"Name":"苹果手机","Modle":"XM0012","Number":"REQU7986","ADDTIME":"2017-08-01","Person":"魏杨 ","Phone":"17687007837","Status":"未审核"},
{"Name":"一二三四五","Modle":"上山打老虎","Number":"老虎不在家","ADDTIME":"2017-08-01","Person":"秦始皇 ","Phone":"17687007837","Status":"通过审核"},
{"Name":"抽水机","Modle":"CH54353","Number":"KJHGF956","ADDTIME":"2017-08-01","Person":"唐太宗 ","Phone":"17687007837","Status":"未审核"},
{"Name":"打火机","Modle":"YY789","Number":"89+KGF","ADDTIME":"2017-08-01","Person":"朱元璋 ","Phone":"17687007837","Status":"未审核"},
{"Name":"平板电脑","Modle":"YY900","Number":"136689","ADDTIME":"2017-08-01","Person":"赵匡胤 ","Phone":"17687007837","Status":"通过审核"},
{"Name":"鼠标","Modle":"99","Number":"99","ADDTIME":"2017-08-01","Person":"李白 ","Phone":"17687007837","Status":"通过审核"},
{"Name":"自行车","Modle":"HK330","Number":"儿童与爱哦","ADDTIME":"2017-08-01","Person":"杜甫 ","Phone":"17687007837","Status":"未审核"},
{"Name":"蓝牙耳机","Modle":"YC897978","Number":"11","ADDTIME":"2017-08-01","Person":"岑参 ","Phone":"17687007837","Status":"通过审核"},
{"Name":"机械键盘","Modle":"JDVKSL","Number":"uyuyyu","ADDTIME":"2017-08-01","Person":"曹操 ","Phone":"17687007837","Status":"未审核"},
{"Name":"终结者轮胎","Modle":"FRGGT8899","Number":";","ADDTIME":"2017-08-01","Person":"张飞 ","Phone":"17687007837","Status":"通过审核"},
{"Name":"野生鸡枞","Modle":"76HHNH","Number":"","ADDTIME":"2017-08-01","Person":"刘备 ","Phone":"17687007837","Status":"通过审核"},
{"Name":"白菜","Modle":"456","Number":"45","ADDTIME":"2017-08-01","Person":"宋江 ","Phone":"17687007837","Status":"未审核"},
{"Name":"青菜","Modle":"CGJH","Number":"DFGHJK","ADDTIME":"2017-08-02","Person":"maozedong ","Phone":"17687007837","Status":"通过审核"},
{"Name":"柴油机","Modle":"X300","Number":"1314669","ADDTIME":"2017-08-02","Person":"魏杨杨 ","Phone":"17687007837","Status":"通过审核"}]

这个就是context.Response.Write(JsonConvert.SerializeObject( ds.Tables[0])) 的 内容,很有意思看着是json 实际上却是string类型的。所以js里面 var data = JSON.parse(tt);把传过来的字符串转化为一个对象 json这一步不能少,我就在这里纠结了1天,用eval()方法还是没有达到效果。

转载于:https://www.cnblogs.com/w5942066/p/7278942.html

ASP.NET前台table通过Ajax获取绑定后台查询的json数据相关推荐

  1. python爬取script标签_Selenium+BeautifulSoup+json获取Script标签内的json数据

    Selenium爬虫遇到 数据是以 JSON 字符串的形式包裹在 Script 标签中, 假设Script标签下代码如下: { "user": { "isLogin&qu ...

  2. 快速获取中国省市列表的JSON数据

    工作需要用到JSON格式的省市列表,搜了一下没找到合适的,就从百度的JS里提取出来过程很简单,将下面的代码保存成一个html文件,用浏览器打开这个文件就可以看到了 <!DOCTYPE html ...

  3. vue写ajax访问springboot后台发送和接收数据

    vue写ajax访问springboot后台发送和接收数据 遇到的问题 一.没有引入js,以前一直使用公司封装后的,现在自己建立项目忘记引入很多js. 二.JS的顺序不能变,在用 this.$http ...

  4. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  5. spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台,后台正常执行,返回数据,但是不能进入前台的ajax回调函数中...

    问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...

  6. 利用jquery的ajax获取后台返回的json数据为空

    错误示例 $.ajax({type:'POST',url:'',data:'',success:function(data){console.log(data);console.log(data.en ...

  7. springmvc代码详细(五种映射,绑定参数,处理json数据,文件上传,转发,拦截器的实现)

    项目结构图: 父工程的pom.xml文件: <!-- 集中定义依赖版本号 --><properties><junit.version>4.10</junit. ...

  8. javaweb后台如何传json数据给前台,以及前台如何解析得到json中数据

    后台controoler中传数据给前台jsp方法: 1.后台controller的方法中定义一个JsonObject对象,JsonObject jsonObject=new JsonObject(); ...

  9. Ajax 通过 Request Payload 体发送 JSON 数据体

    为什么80%的码农都做不了架构师?>>>    AJAX POST 发送数据有2种方式: Form Data 和  Request Payload . Form Data 是我们大家 ...

最新文章

  1. 再来一个吊打百度网盘的开源神器,还是99年妹子开发的
  2. AutoX“真无人”车队驶上繁忙街头,中国正式跨入无人驾驶时代
  3. Mark Down 使用实例
  4. 【贪心】Stall Reservations(luogu 2859/poj 3190)
  5. yolov5搭建环境_Yolov5环境配置和训练私有数据,YOLOv5,以及,私人
  6. python 调用 tensorflow.dll_python tensorflow导入DLL加载失败
  7. 信息学奥赛一本通 1190:上台阶 | OpenJudge NOI 2.3 3525:上台阶
  8. 2017年单多晶市场竞争核心分析
  9. helpdesk2 foxmail和outlook互导问题
  10. [Leetcode] Path Sum II路径和
  11. 修改docker内mysql配置后无法启动解决方法
  12. 移动通信原理学习笔记之一
  13. 各种软件以及插件官网地址 echarts Vscode 阿里云图标库 鼠标图标
  14. prometheus安装与开启并设置开机自启
  15. bootstrap柱状图
  16. 微信小程序---下载、打开及预览PDF文件的方法
  17. python中ipaddress库用法详解
  18. 暗影精灵4清灰、加硅脂
  19. 服务器机柜型号大全,标准机柜尺寸表
  20. 12306官方抢票服务,铁路候补购票服务扩大到全部旅客列车!

热门文章

  1. C++ linux系统api
  2. scrapy.spider
  3. linux下声卡的安装
  4. 中小机房UPS电源及环境多方式在线监控和告警方案
  5. VMware VMFS文件系统元数据不一致问题处理
  6. Android学习总结(3)——Handler深入详解
  7. eclipse java类图_eclipse中。green UML 自动生成类图
  8. 安卓能不能安装jar_PyCharm 2019安装教程
  9. 不规则图形数格子的方法_北师大版五年级数学上册数学6.1组合图形的面积微课堂、同步练习、图文解读...
  10. 雷军定AI+IoT为小米核心战略,牵手宜家推进生态布局