让网页显示ajax的查询数据
今天下午做一个项目小练习.需要把查询日志的内容显示到网页上来.一开始陷入了一个误区.
一直以来我这个小项目需要访问ashx来生成html的代码.后台用的Razor模板引擎.
刚开始显示用户列表时.因为是显示到了另一个界面(其实就是另一个网页).razor直接输出没什么问题

但是下面这个需要显示到当前页面的下面

当我ajax提交后.razor模板引擎拼接后的代码.确是返回到了ajax中的data中

不能像最上面那张图那样显示了.我的想法破灭了.
于是乎,又开始想办法.既然需要返回到当前页面.那么直接表单提交也许可以.但是表单提交需要刷新.还要改好多代码.不太喜欢.就放弃了.感觉还是有办法的.
从新建个页面.但是那样的话上面的那些按钮什么的就没了,不美观.这个新建的页面放到这个页面的下面.怎么放?用ifarme.好像很麻烦.
百度之...
不要返回网页源代码.返回数据.然后写for循环绑定.

不过还是不太喜欢.因为我不想放弃razor.
于是乎...想到了innerHTML
直接改变元素的html代码,用razor替换代码.替换好后.传给ajax的data.然后用innerHTML一赋值.就OK了
需要替换的html代码

然后页面里写一个<table id="tb"></table>.用dom获取此元素.var tb = document.getElementById("tb");然后tb.innerHTML = 上面的那部分html代码(用ajax返回);
于是乎就ok.是不是有人觉的这样麻烦.但是我就是想要用razor.........
最后,效果图

虽然写文章没有多长.但是我卡在这个问题上面真的用了很长时间.从下午到晚上.一遍一遍调试找哪里出错.哪里逻辑不对.各种各样的问题.弄的头都大了.
但是我相信.同为程序员的你.应该明白我这种情况.卡在一个问题上好久.当时觉的很难.各种努力解决后.回过来看.好像没那么难了.
最后.我是新手.轻喷.博客园的图片上传太难用了.速度真慢.一个图上传好几次.才成功.歧视我的网络嘛.我是 铁通网.....
让网页显示ajax的查询数据的更多相关文章
- 通过ajax GET方式查询数据,Django序列化objects
点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody 前端html: <div class="box ...
- 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。
最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...
- SSH Secure Shell Client连接Linux 命令行显示中文乱码问题 和oracle 查询数据中文乱码问题
一.SSH Secure Shell Client连接Linux 命令行显示中文乱码问题 linux 设置系统语言 修改 /etc/sysconfig/i18n 文件,如 LANG="en_ ...
- SQL随机查询,显示行号,查询数据段
1.显示行号 如果数据没有删除的情况下主键与行号是一致的,但在删除某些数据,行号就与主键不一致了,这时需要查询行号就需要用新的方法,在SQL Server2005之前,需要使用临时表,但在SQL Se ...
- jquery select 列表 ajax 动态获取数据 模糊查询 分页
最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...
- MySql查询数据令某字段显示固定值
我们用SQL查询数据时后,基于某些原因不想看到某字段的值,比如密码,我们可以通过创建视图,忽略某一字段的值. 同时我们也可以直接通过SQL语句来让其显示某个固定值: (1)一般查询语句: SELECT ...
- SpringBoot入门07-Thymeleaf中显示ajax请求到的数据
Thymeleaf中显示ajax请求所需依赖 <!--所需依赖--><dependency> <groupId>org.springframework.boot&l ...
- mysql 根据日期进行查询数据,没有数据也要显示空
写这篇博客主要是记录自己在对订单进行按日期查询时使用的一种查询的方法,这里的orders是订单表,你也可以改成别的什么表对于最终数据不会造成影响,除非你那个表的数据只有几条那样就会出现查不到日期的情况 ...
- hive命令查询数据不显示表头解决办法
在hive命令行中查询数据如下: 表头未显示出来 解决办法: 修改hive安装包conf/hive-site.xml配置文件: <property> <name>hive.cl ...
随机推荐
- Windows phone 8.1应用集成cortana语音命令
微软推出小娜已经有一段时间了,最近恰好在研究其用法,就随便写点记录一下自己的心得. 在研究时参考了@王博_Nick的博客:http://www.cnblogs.com/sonic1abc/p/3868 ...
- linux防火墙与端口设置
1.编辑iptables文件 # sudo vi /etc/sysconfig/iptables 添加如下一行 -A INPUT -p tcp -m state --state NEW -m tcp ...
- java字节码速查笔记
java字节码速查笔记 发表于 2018-01-27 | 阅读次数: 0 | 字数统计: | 阅读时长 ≍ 执行原理 java文件到通过编译器编译成java字节码文件(也就是.class文件) ...
- IO流之Properties类
Properties类介绍 Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. 特点: 1.Hashtable的 ...
- mysql五补充:SQL逻辑查询语句执行顺序(待完善)
一.SELECT语句关键字的定义顺序(语法顺序) SELECT DISTINCT <select_list> FROM <left_table> <join_type&g ...
- SQLAlchemy的使用---外键ForeignKey数据增删改查
# 添加数据 from sqlalchemy.orm import sessionmaker from create_table_ForeignKey import engine, Student, ...
- java参数传递之值传递
一 概述 1.什么是参数传递? 调用方法时向形参传递数据的过程叫做参数传递.在编程语言中有两种传递方式:值传递与引用传递.必须强调的是,这里提到的两种传递方式不是仅限于java使用到的传递方式,而是出 ...
- 数组reduce和map方法
1.有一个长度为100的数组,请以优雅的方式求出该数组的前10个元素之和 var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],sum ...
- OAuth2.0 入门与进阶
一.基础知识 1.OAuth产生背景 很多网站.APP 弱化甚至没有搭建自己的账号体系,而是直接使用社会化登录的方式,这样不仅免去了用户注册账号的麻烦.还可以获取用户的好友关系来增强自身的社交功能. ...
- Prime Numbers in a Grid素数网格
&/@ Shorthand notation for Map If[PrimeQ[#], Framed@Style[#, Orange, Bold, 15], #] & /@ Rang ...