ajax请求到后台数据，前台不用拼接字符串append追加HTML标签，一样显示到页面 使用空模板

原文

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<%
String path = request.getcontextpath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>
<script type="text/javascript" src=\'#\'" /js/jquery-1.11.1.min.js"></script>

<style>
</style>
<script>
$(document).ready(function() {
//搜索按钮（全部搜索和按条件搜索）
$("#searchBtn").click(function(){
var itemname = $("#itemname").val();
var year = $("#year option :selected ").val();
//当输入框为空，年份没选择，就为搜索全部数据
if(itemname =="" && year == undefined){
$.get("<%=request.getcontextpath()%>/searchAll",
function(data){
$.each(data.tasklist,function(i,obj){
/* 获取数据，添加给模板表格 */
$("#temp_table #temp_tr #id").text(obj.id);
$("#temp_table #temp_tr #name").text(obj.name);
$("#temp_table #temp_tr #type").text(obj.type);
$("#temp_table #temp_tr #cost").text(obj.cost);
$("#temp_table #temp_tr #state").text(obj.state);
$("#temp_table #temp_tr #date").text(obj.date);
/*复制模板表格，并插入到指定位置,参数true,表示CSS和事件也克隆 */
$("#temp_table #temp_tr").clone(true).insertAfter("#is_header");
});
});
}

});
});
</script>

</head>

<body>




<!-- 表格模板---用于处理获取后台数据后生成表格， -->
<div id="temp" style="display: none;">
<table id="temp_table">
<tr id="temp_tr">
<td id="id" width="5%" height="25" align="center" bgcolor="#EFFBFE">aa</td>
<td id="name" align="center" bgcolor="#EFFBFE">bb</td>
<td id="type" colspan="2" align="center" bgcolor="#EFFBFE">cc</td>
<td id="cost" align="center" bgcolor="#EFFBFE">dd</td>
<td id="date" align="center" bgcolor="#EFFBFE">ff</td>
<td id="state" align="center" bgcolor="#EFFBFE">ee</td>
<td align="left" bgcolor="#EFFBFE">
<div align="left" style="padding-left: 5px">
<div align="center">
<input name="edit" type="button" value="编辑" /> &nbsp;
<input name="delete" type="button" value="删除"/>
</div>
</div>
</td>
</tr>
</table>
</div>





<!-- 以下是显示到页面的内容-->
<table width="99%" height="25" border="0" align="center"
cellpadding="0" cellspacing="0" style="margin-bottom: 4px;">
<tr>
<td width="17" background="images/bj4.gif"><img
src="Picture/r.gif" width="16" height="16" /></td>
<td width="466" background="images/bj4.gif">张宇(学院申报者):你好！欢迎光临，您上次登录时间是：2015-09-20
23:15:15</td>
<td width="162" align="center" background="images/bj4.gif"></td>
</tr>
</table>
<table width="99%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="1%" align="left" background="images/b2.jpg"><img
src="Picture/b1.jpg" width="10" height="26" /></td>
<td width="68%" background="images/b2.jpg"><table width="124"
border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" align="left"><img src="Picture/tz.gif"
width="10" height="16" /></td>
<td width="104" align="left" class="biao">项目搜索</td>
</tr>
</table></td>
<td width="31%" align="right" background="images/b2.jpg"><img
src="Picture/b3.jpg" width="9" height="26" /></td>
</tr>
</table>
<table width="99%" border="0" align="center" cellpadding="3"
cellspacing="1" bgcolor="#AEDEF4">
<tr>
<td align="center" bgcolor="#E2F7FE">
<form id="form1" name="form1" method="post"
action="<%=path%>/searchByYear">
<table width="50%" border="0" cellspacing="1" cellpadding="3">
<tr>
<td width="10%" height="25" align="center">项目名称：</td>
<td width="14%" align="left"><label> <input
name="itemname" type="text" id="itemname" size="20" />
</label></td>
<td width="6%" align="center">年份：</td>
<td width="14%" align="left"><select name="year" id="year">
<option value="">全部</option>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
<option value='2012'>2012</option>
<option value='2013'>2013</option>
<option value='2008'>2008</option>
<option value='2014'>2014</option>
<option value='2015'>2015</option>
<option value='2016'>2016</option>
<option value='2017'>2017</option>
</select></td>
<td width="8%"><input type="button" id="searchBtn"
name="searchBtn" value="搜索" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>

<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5"></td>
</tr>
</table>
<table width="99%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="1%" align="left" background="images/b2.jpg"><img
src="Picture/b1.jpg" width="10" height="26" /></td>
<td width="68%" background="images/b2.jpg"><table width="124"
border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" align="left"><img src="Picture/tz.gif"
width="10" height="16" /></td>
<td width="104" align="left" class="biao">项目列表</td>
</tr>
</table></td>
<td width="31%" align="right" background="images/b2.jpg"><img
src="Picture/b3.jpg" width="9" height="26" /></td>
</tr>
</table>
<!-- 这里是获取后台数据，并画出显示表格 -->
<table id="is_table" width="99%" border="0" align="center"
cellpadding="3" cellspacing="1" bgcolor="#AEDEF4"
style="border: 1px solid #AEDEF4">

<tr id="is_header">
<td width="5%" height="25" align="center" bgcolor="#EFFBFE">ID</td>
<td align="center" bgcolor="#EFFBFE">项目名称</td>
<td colspan="2" align="center" bgcolor="#EFFBFE">项目类型</td>
<td align="center" bgcolor="#EFFBFE">申请经费</td>
<td align="center" bgcolor="#EFFBFE">提交时间</td>
<td align="center" bgcolor="#EFFBFE">状态</td>
<td align="center" bgcolor="#EFFBFE">管理操作</td>

</tr>


<!-- 克隆的模板表格，粘贴到这里 -->

<tr> <td height="25" bgcolor="#FFFFFF">&nbsp;</td> <td colspan="6" bgcolor="#FFFFFF"><span class='pagelink'>首页</span> <span class='pagelink'>上一页</span> <span class='pagelink'>下一页</span> <span class='pagelink'>尾页</span> &nbsp;&nbsp;转到第&nbsp; <input id='jumpSelect' type='text' size='2' value='1' />页</td> <td bgcolor="#FFFFFF"> </td> </tr> </table> </body> </html>

ajax请求到后台数据，前台不用拼接字符串append追加HTML标签，一样显示到页面 使用空模板的更多相关文章

  1. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  2. iOS HTML5日期选择器不接受宽度：100％;

    我的表单中有一个html5日期选择器,用于我的网站的移动版本.我的所有文本输入都设置为宽度：100％,其父td设置为padding-right：15px以使其适合.这意味着我的字段格式很好,并且当设备的方向发生变化时,调整为总是填满容器的一半.但是,日期选择器的行为方式不一样,有人可以帮忙吗？

  3. swift 创建cocoapod

    Butwhenyou’redevelopingyourownCocoaPod,youwillinsteadspecifyalocalpath,likethis:Therearetwobenefitstothisapproach:Itusesthelocalfilesonyourmachineforthepod,insteadoffetchingthemfromaremoterepository.n

  4. Swift 绘图板功能完善以及终极优化

    前文总结接着这篇：Swift全功能的绘图板开发，虽然在上一篇中我们已经完成了这些功能：支持铅笔绘图（画点）支持画直线支持一些简单的图形做一个真正的橡皮擦能设置画笔的粗细能设置画笔的颜色能设置背景色或者背景图但是还有一个非常重要的功能没有实现，没错，那就是Undo/Redo！

  5. Swift 全功能的绘图板开发

    工程搭建先创建一个SingleViewApplication工程：语言选择Swift：为了最大程度的利用屏幕区域，我们完全隐藏掉状态栏，在Info.plist里修改或添加这两个参数：然后进入到Main.storyboard，开始搭建我们的UI。BaseBrush顾名思义，BaseBrush将会作为一个绘图的基类而存在，我们会在它的基础上创建一系列的子类，以达到弹性的设计目的。从当前的context中，得到Image，如果是ended状态或者需要支持连续不断的绘图，则将Image保存到realImage中。

  6. 第七章：table单元格的选择和UIAlertController

    运行app，自己试试选择cell更多关于UIAlertController再继续研究之前，我们需要更多的了解一下UIAlertController。UIAlertController是在iOS8引入用来替代UIAlertView和UIActionSheet的。参照上面的代码片段，我们可以指定UIAlertController的preferredStyle。创建好动作后可以使用addAction将动作和UIAlertController连接起来。这就是使用UIAlertController的方法。

  7. tableview使用自定义类，页面跳转，本地存储

    如图，添加下面的三行代码2下面创建自己的cell，新建一个swift文件，命名为TableViewCell3因为还要考虑到界面的跳转，需要新建swift文件PushTest

  8. Swift UITableView相关功能八

    但是，我们发现当我们点击右侧索引的时候好像和table的关系不明确。其实我们少了一个代理方法，他是专门用来关联索引和table分区的这里我们简单设置了一下，将字母顺序和table的分区对应上了。

  9. Swift设置Table View的Cell中Lable自适应内容高度的

    Swift设置TableView的Cell中Lable自适应内容高度的最后修改在TableCell中Label的lines属性，将其设置为0。

  10. 更加 Swift 化的 Collection View 和 Table View Cells

    本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至dio@foxmail.com举报，一经查实，本站将立刻删除。

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部