无刷新实现后台数据的查询
来源：互联网 发布：减肥午餐吃什么知乎 编辑：程序博客网 时间：2024/04/29 05:31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章列表</title>
</head>
<body>
<div id="table">
<table border="1" align="center" width="1000">
</tr>
<tr>
<th><input type="checkbox" id="checkbox_all" onclick="checkbox()">全选/反选</th>
<th>编号</th>
<th>标题</th>
<th>内容</th>
<th>作者</th>
<th>类别</th>
<th>时间</th>
</tr>
{foreach $lists as $list}
<tr align="center">
<td><input type="checkbox" name="box"></td>
<td>{$list.id}</td>
<td>{$list.title}</td>
<td>{$list.content}</td>
<td>{$list.author}</td>
<td>{$list.cate}</td>
<td>{$list.time|date_format:'%D %H:%M:%S'}</td>
</tr>
{/foreach}
</table>
</div>
</body>
<script type="text/javascript">
function checkbox(){
//设置反选
var allcheck=document.getElementById('checkbox_all');
var box=document.getElementsByName('box');
for(var i=0;i<box.length;i++){
if(box[i].checked==true){
box[i].checked=false;
}else{
box[i].checked=true;
}
}
}
//搜寻方法
function search(){
var search=document.getElementById('search').value;
//创建ajax对象传递搜索内容到动态页面进行数据查询
var xhr=new XMLHttpRequest();
xhr.open('get',"search.php?search="+search);
xhr.send(null);
xhr.onreadystatechange=function(){
}
}
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>文章列表</title>
</head>
<body>
<div id="table">
<table border="1" align="center" width="1000">
<tr align="center">
<!---设置搜寻的文本框和搜寻按钮->
</tr>
<tr>
<th><input type="checkbox" id="checkbox_all" onclick="checkbox()">全选/反选</th>
<th>编号</th>
<th>标题</th>
<th>内容</th>
<th>作者</th>
<th>类别</th>
<th>时间</th>
</tr>
{foreach $lists as $list}
<tr align="center">
<td><input type="checkbox" name="box"></td>
<td>{$list.id}</td>
<td>{$list.title}</td>
<td>{$list.content}</td>
<td>{$list.author}</td>
<td>{$list.cate}</td>
<td>{$list.time|date_format:'%D %H:%M:%S'}</td>
</tr>
{/foreach}
</table>
</div>
</body>
<script type="text/javascript">
function checkbox(){
//设置反选
var allcheck=document.getElementById('checkbox_all');
var box=document.getElementsByName('box');
for(var i=0;i<box.length;i++){
if(box[i].checked==true){
box[i].checked=false;
}else{
box[i].checked=true;
}
}
}
//搜寻方法
function search(){
var search=document.getElementById('search').value;
//创建ajax对象传递搜索内容到动态页面进行数据查询
var xhr=new XMLHttpRequest();
xhr.open('get',"search.php?search="+search);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//将查询到的表单数据通过响应文本的方式替换本页面的table标签
}
}
}
</script>
</html>
阅读全文
0 0
- 无刷新实现后台数据的查询
- 实现无刷新分页:后台数据查询
- jqueryform 无刷新数据分页的实现
- Ajax 的jquery与后台交互实现无刷新效果
- 本页无刷新修改后台数据
- struts2+jquery无刷新获取后台数据
- asp.net用xmlhttp实现无刷新定时读取后台数据
- 查询的数据刷新
- AJAX提交数据无刷新,“重量级”的实现：ModalUpdateProgress控件。
- php+ajax实现无刷新数据分页的办法
- 利用Microsoft.XMLHTTP实现无刷新查询
- 利用Microsoft.XMLHTTP实现无刷新查询
- 前台调用后台方法，无刷新更新数据
- asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
- 实现无刷新加载数据(asp+ajax)
- AJAX实现无刷新加载数据
- XMlHTTP ajax实现数据无刷新调用
- Ajax无刷新实现定时更新数据
- 迭代器与组合模式
- bzoj2157 旅游 树链剖分
- ajax 理解
- SQLite案例1：利用SQLiteDatabase操作数据库与表
- 3.ROM SQLAlchemy使用代码
- 无刷新实现后台数据的查询
- winform的label控件竖着显示
- Unity-Android交互(.aar包的使用)
- Postgresql 10 Windows 下手动安装
- lvs+keepalived+nginx
- 常见浏览器兼容性问题与解决方案
- 3Sum Closest算法
- ubuntu命令安装chrome浏览器
- 解决电脑同时使用有线网上内网，无线网上外网的冲突
