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的查询数据在网页显示的全部内容，希望对大家有所帮助。

赞 (0)

相关推荐

  • Ajax方式实现定期更新页面某块内容的方法

    本文实例讲述了Ajax方式实现定期更新页面某块内容的方法.分享给大家供大家参考.具体实现方法如下: function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 ); 希望本文所述对大家的Ajax程序设计有所帮助.

  • Ajax详解及其案例分析

    Ajax详解及其案例分析

    1 获得Ajax对象 1.1 问题 如何获得XmlHttpRequest对象. 1.2 方案 区分浏览器,使用不同的获取方式. 1.3 步骤 步骤一: 新建ajax01.html页面 新建一个Web工程,在WebRoot下新建ajax01.html页面.在<script>标记内编写JavaScript代码实现获取Ajax对象. <script type="text/javascript"> /*获取Ajax对象*/ function getXhr(){ var

  • php简单实现查询数据库返回json数据

    示例代码一: // 设置返回json格式数据 header('content-type:application/json;charset=utf8'); //连接数据库 $link = mysql_connect("localhost", "root", "root") or die("Unable to connect to the MySQL!"); mysql_query("SET NAMES 'UTF8'&q

  • ajax添加数据后如何在网页显示

    ajax添加数据后如何在网页显示

    下面通过图文并茂的方式展示给大家,具体内容如下所述: 今天下午做一个项目小练习.需要把查询日志的内容显示到网页上来.一开始陷入了一个误区. 一直以来我这个小项目需要访问ashx来生成html的代码.后台用的Razor模板引擎. 刚开始显示用户列表时.因为是显示到了另一个界面(其实就是另一个网页).razor直接输出没什么问题 但是下面这个需要显示到当前页面的下面 当我ajax提交后.razor模板引擎拼接后的代码.确是返回到了ajax中的data中 不能像最上面那张图那样显示了.我的想法破灭了.

  • Ajax添加数据即时显示信息篇

    今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据．需要说明的是．本次ajax实例教程与前3篇有2点大不同之处． 1:我们要对数据库进行操作．2:更换请求的服务端网页．不再使用Web_ajax.Asp文件．新的请求网页是:Add_Data.Asp．看后缀大家就应该能明白．我在服务端采用的技术是Asp．都说Asp过时了．可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码．我会在该次教程最

  • ajax读取数据后使用jqchart显示图表的方法

    ajax读取数据后使用jqchart显示图表的方法

    本文实例讲述了ajax读取数据后使用jqchart显示图表的方法.分享给大家供大家参考.具体分析如下: 最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了. 但是和jqchart对比,还是有很多不同之处的. 实现效果: 我就对jqchart进行了重新编写. 首先要解决的是不显示x轴和y轴: //各DIV作成 // 取消标题显示 /* this.titleBox//Title =this.mkBoxElement('T', this.op.titleLeft,this.op.tit

  • Ajax添加数据与删除篇实现代码

    如果你真的把前几篇掌握了．实现ajax删除功能会易如反常．我所要教你的是．灵活利用JavaScript和Dom来实现一个酷酷的删除效果．其实你学习到这里．已经能够明白,在ajax技术中那些被请求的 服务端网页,在非ajax应用中并无太大区别．无非也是接受前端发过来的请求．在后台执行一些操作而已!学习完这篇教程以后．你会明白想要实现够炫够酷的的ajax效果．你必须要熟练掌握JavaScript Dom 这些技术精通． 刚刚我喝多了,上面的这段话是我在两天前就写好的．我本来想直接睡觉的．但我想试试．

  • JQuery的ajax获取数据后的处理总结(html,xml,json)

    1.html处理比较简单,直接输出即可.一般用$("jb51div").innerHTML等即可 2.json格式数据调用 复制代码 代码如下: $.ajax({ url : "/trundle/RawContentAction.getAjaxContent.act", data : "param1=22", dataType : "json",//这里的dataType就是返回回来的数据格式了html,xml,json ca

  • ajax更新数据后，jquery、jq失效问题

    给元素绑定click事件 ,但是遇到一个问题 就是 当我执行一些ajax请求后 这个click事件就失效了 比如说 我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了 其实 原因很简单 ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定 解决方法 有两个 : 1. 在ajax请求成功之后重新绑定 2. 用live方法 复制代码 代码如下:

  • sql添加数据后返回受影响行数据

    Inserted 表中的行是触发器表中新行的副本. 语法 返回所有列 INSERT INTO [tableName] ([columnName1],[columnNameN],...) OUTPUT inserted.* VALUES ('value1','value2',...) 返回指定列 INSERT INTO [tableName] ([columnName1],[columnNameN],...) OUTPUT inserted.[columnName] VALUES ('value1

  • Ajax修改数据即时显示篇实现代码

    我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码． 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

  • Ajax读取数据到表格的实现代码

    今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内．同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 ．将ajax请求的数据显示到该表格内． 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术．如果你还不知道如何使用Asp输出xml请返回:＂ajax开始准备篇＂ 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构．因为我们

  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定

    详解Vue.js基于$.ajax获取数据并与组件的data绑定

    Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <

随机推荐