- 浏览: 529726 次
- 性别:
- 来自: 天津
文章分类
- 全部博客 (230)
- java (87)
- c/c++/c# (39)
- ASP.net MVC (4)
- eclipse/visual studio (3)
- tomcat/weblogic/jetty (13)
- linux/unix/windows (20)
- html/javascript/jquery/kendo/bootstrap/layui/vue/react (31)
- hibernate/struts/spring/mybatis/springboot (21)
- lucene/solr/ELK (2)
- shiro (0)
- oracle/sqlserver/mysql/postgresql (23)
- shell/python/ruby (6)
- android (0)
- maven/ant (1)
- freemarker/thymeleaf/velocity (1)
- open source project (41)
- cache/memcached/redis (0)
- nosql/hadoop/hbase/mongodb (0)
- system architecture/dubbo/zookeeper (0)
- software testing (0)
- system optimization (0)
- system security (0)
- tcp/udp/http (2)
- roller/wordpress (2)
- 工具收藏 (8)
- 文摘 (4)
- 生活 (0)
最新评论
-
coconut_zhang:
这个demo 非常完整了,是指下面说的那个html 模版,模版 ...
flying sauser, thymeleaf实现PDF文件下载 -
a93456:
你好,你有完整的demo吗? String template这 ...
flying sauser, thymeleaf实现PDF文件下载 -
yujiaao:
fn 函数循环是没有必要的啊,可以改成
protecte ...
Java 笛卡尔积算法的简单实现 -
安静听歌:
设置了.setUseTemporaryFileDuringWr ...
使用jxl导出大数据量EXCEL时内存溢出的解决办法 -
q280499693:
写的很详细,但是我现在想知道他们是怎么定位log4j.prop ...
关于SLF4J结合Log4j使用时日志输出与指定的log4j.properties不同
通过AJAX异步减少网络内容传输,而JSON则可以把传输内容缩减到纯数据;然后利用jQuery内置的AJAX功能直接获得JSON格式的数据;在客户端直接绑定到数据控件里面,从而达到最优。
1.设计htm页面:
<!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>
<title>test2</title>
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
<div>
<div>
<br />
<input id="first" type="button" value=" << " /><input id="previous" type="button"
value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
value=" >> " />
<span id="pageinfo"></span>
<ul id="datas">
<li id="template">
<span id="OrderID">
订单ID
</span>/
<span id="CustomerID">
客户ID
</span>
<span id="EmployeeID">
雇员ID
</span>/
<span id="OrderDate">
订购日期
</span>/
<span id="ShippedDate">
发货日期
</span>/
<span id="ShippedName">
货主名称
</span>/
<span id="ShippedAddress">
货主地址
</span>/
<span id="ShippedCity">
货主城市
</span>/
<span id="more">
更多信息
</span>
</li>
</ul>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
LOADING....
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
</html>
注:ID属性比较重要,用于数据绑定。
2.使用jQuery编写AJAX请求文件
var pageIndex = 1
var pageCount = 0;
$(function(){
GetPageCount();//取得分页总数
pageCount = parseInt($("#pagecount").val());//分页总数放到变量pageCount里
$("#load").hide();//隐藏loading提示
$("#template").hide();//隐藏模板
ChangeState(0,1);//设置翻页按钮的初始状态
bind();//绑定第一页的数据
//第一页按钮click事件
$("#first").click(function(){
pageIndex = 1;
ChangeState(0,1);
bind();
});
//上一页按钮click事件
$("#previous").click(function(){
pageIndex -= 1;
ChangeState(-1,1);
if(pageIndex <= 1)
{
pageIndex = 1;
ChangeState(0,-1);
}
bind();
});
//下一页按钮click事件
$("#next").click(function(){
pageIndex += 1;
ChangeState(1,-1);
if(pageIndex>=pageCount)
{
pageIndex = pageCount;
ChangeState(-1,0);
}
bind(pageIndex);
});
//最后一页按钮click事件
$("#last").click(function(){
pageIndex = pageCount;
ChangeState(1,0);
bind(pageIndex);
});
});
//AJAX方法取得数据并显示到页面上
function bind()
{
$("[@id=ready]").remove();
$("#load").show();
$.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//返回json格式的数据
url: "Handler.ashx",//要访问的后台地址
data: "pageIndex=" + pageIndex,//要发送的数据
complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
success: function(msg){//msg为返回的数据,在这里做数据绑定
var data = msg.table;
$.each(data, function(i, n){
var row = $("#template").clone();
row.find("#OrderID").text(n.OrderID);
row.find("#CustomerID").text(n.CustomerID);
row.find("#EmployeeID").text(n.EmployeeID);
row.find("#OrderDate").text(ChangeDate(n.OrderDate));
if(n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate));
row.find("#ShippedName").text(n.ShipName);
row.find("#ShippedAddress").text(n.ShipAddress);
row.find("#ShippedCity").text(n.ShipCity);
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+"> More</a>");
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[@id=ready]").show();
SetPageInfo();
}
});
}
function ChangeDate(date)
{
return date.replace("-","/").replace("-","/");
}
//设置第几页/共几页的信息
function SetPageInfo()
{
$("#pageinfo").html(pageIndex + "/" + pageCount);
}
//AJAX方法取得分页总数
function GetPageCount()
{
$.ajax({
type: "get",
dataType: "text",
url: "Handler.ashx",
data: "getPageCount=1",
async: false,
success: function(msg){
$("#pagecount").val(msg);
}
});
}
//改变翻页按钮状态
function ChangeState(state1,state2)
{
if(state1 == 1)
{
document.getElementById("first").disabled = "";
document.getElementById("previous").disabled = "";
}
else if(state1 == 0)
{
document.getElementById("first").disabled = "disabled";
document.getElementById("previous").disabled = "disabled";
}
if(state2 == 1)
{
document.getElementById("next").disabled = "";
document.getElementById("last").disabled = "";
}
else if(state2 == 0)
{
document.getElementById("next").disabled = "disabled";
document.getElementById("last").disabled = "disabled";
}
}
3.利用JSON三方控件在服务器端获取JSON格式数据
<%@ WebHandler Language="C#" Class="jQueryJSON.Handler" %>
using System;
using System.Data;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Configuration;
using System.Data.SqlClient;
using System.Text;
using System.Xml;
using NetServ.Net.Json;
namespace jQueryJSON
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/json/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler : IHttpHandler
{
readonly int PageSize = int.Parse(ConfigurationManager.AppSettings["PageSize"]);
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//不让浏览器缓存
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
context.Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "");
context.Response.CacheControl = "no-cache";
string result = "";
if (context.Request.Params["getPageCount"] != null) result = GetPageCount();
if (context.Request.Params["pageIndex"] != null)
{
string pageindex = context.Request.Params["pageIndex"];
//if (context.Cache.Get(pageindex) != null)
// result = context.Cache.Get(pageindex).ToString();
//else
//{
// result = GetPageData(context.Request.Params["pageIndex"]);
// context.Cache.Add(
// pageindex,
// result,
// null,
// DateTime.Now.AddMinutes(1),
// System.Web.Caching.Cache.NoSlidingExpiration,
// System.Web.Caching.CacheItemPriority.Default,
// null);
//}
result = GetPageData(context.Request.Params["pageIndex"]);
}
context.Response.Write(result);
}
private string GetPageData(string p)
{
int PageIndex = int.Parse(p);
string sql;
if (PageIndex == 1)
sql = "select top " + PageSize.ToString() + " * from Orders order by OrderID desc";
else
sql = "select top " + PageSize.ToString() + " * from Orders where OrderID not in(select top " + ((PageIndex - 1) * PageSize).ToString() + " OrderID from Orders order by OrderID desc) order by OrderID desc";
string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString();
SqlConnection conn = new SqlConnection(dbfile);
SqlDataAdapter da = new SqlDataAdapter(sql, conn);
DataTable dt = new DataTable("table");
da.Fill(dt);
return DataTableJson(dt);
}
private string GetPageCount()
{
string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString();
SqlConnection conn = new SqlConnection(dbfile);
SqlCommand cmd = new SqlCommand("select count(*) from Orders", conn);
conn.Open();
int rowcount = Convert.ToInt32(cmd.ExecuteScalar());
conn.Close();
return ((rowcount + PageSize - 1) / PageSize).ToString();
}
private string DataTable2Json(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"");
jsonBuilder.Append(dt.TableName);
jsonBuilder.Append("\":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
private string DataTableJson(DataTable dt)
{
JsonWriter writer = new JsonWriter();
JsonObject content = new JsonObject();
JsonArray Orders = new JsonArray();
JsonObject Order;
JsonObject OrderItem = new JsonObject();
for (int i = 0; i < dt.Rows.Count; i++)
{
Order = new JsonObject();
for(int j =0;j<dt.Columns.Count;j++)
{
Order.Add(dt.Columns[j].ColumnName, dt.Rows[i][j].ToString());
}
Orders.Add(Order);
}
content.Add(dt.TableName, Orders);
content.Write(writer);
writer = new IndentedJsonWriter();
content.Write(writer);
return writer.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
发表评论
-
logback的使用和logback.xml详解
2017-03-09 11:20 2125一、logback的介绍 Logback是由log4j ... -
jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决
2016-06-24 17:10 601data : { count: Math.random ... -
thymeleaf与spring整合
2016-06-15 10:08 11771、使用的是Spring EL而不是Ognl。2、访问上下文 ... -
SpringMVC 400 Bad Request 问题
2016-06-15 09:11 1898在提交表单时,发生400错误,并未进入save方法。 ... -
bootstrap3自定义popover显示的内容
2016-05-27 11:14 1066<script type="text/jav ... -
JS 中面向对象的5种写法
2015-08-13 15:54 634定义Circle类,拥有成员变量r,常量PI和计算面积的成员 ... -
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2015-07-31 15:09 4067动态载入 JavaScript/Csss 文件 传统加载外部 ... -
Java_Ant详解
2015-06-15 16:54 6791,什么是antant是构建工 ... -
httpClient通过代理(Http Proxy)进行请求
2014-09-16 14:18 1135httpClient通过代理(Http Proxy)进行请求 ... -
httpclient上传文件及传参数
2014-09-16 11:07 11470用到的包有commons-httpclient-3.0.1. ... -
简单返回顶部代码及注释说明
2014-07-16 10:44 898最近做了一个排行榜页 ... -
深入浅出JSONP:解决AJAX跨域问题
2014-04-16 11:00 762取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着 ... -
Progress Bar Plugin
2013-12-26 10:04 775from: http://digitalbush.com/p ... -
javascript cookie
2013-11-08 09:18 994cookie概述在上一节, ... -
plupload实现多图片上传
2013-07-19 16:12 23185最近发现一个非常牛的上传组件(http://www.plu ... -
调用axis2 WebService三种方法
2013-06-28 13:41 1735第一:简单的使用axis2包自己实现调用 package ... -
java-jsch实现sftp文件操作
2013-06-26 13:55 3602(曾在天涯)的文章详细讲解了jsch中的函数以及用法 ht ... -
url encode的问题
2012-11-06 08:27 58671.urlencode和decode 字符的编码和解码在有中 ... -
通过Class Name获取一个对象的数组
2012-09-24 10:42 3884DOM 提供了一个名为 getElementById() ... -
Lucene3.0 初窥(转载)
2012-08-04 21:38 947【Lucene3.0 初窥】全文检索的基本原理 ...
相关推荐
jQuery、JSON超强组合_files
文件仅有两个文件,一个是HighCharts做的曲线图标htm,使用JQuery Ajax接收JSON字符串,后台使用java HttpServeltResponse json, out.write("....");此例运行需要官方的js demo包,部分java方法代码如下涵盖两条曲线,str...
用表单元素class属性可以针对性地组合JSON数据。 2、后端ASP.NET用JavaScriptSerializer反序列化为对象实列。 3、好处:简化了前端数据读取与后端数据赋值。 代码如下:function GetJSONStr(class_name) { var a = []...
它是以下各项的组合: 大公园的 by Kyle Simpson慷慨的 JSON 文档示例 { unquotedStrings: "are ok", // Single line comments are too. "cat": true, /* * And multi-line comments */ riesling: "schloss ...
这些功能的组合允许快速开发JSON API的即时用户界面,例如在基于CouchDB的后台Office GUI中。 您可以在观看演示。用法这是一个简单的示例,显示了如何将此库嵌入到Web应用程序中: <!-- .. -->[removed]...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
jquery-easyui-1.3.2组件框架案例,只有前端代码组合框架数据是写死的,如需动态获得,必须以json格式处理
创建您自己的键盘映射,以显示您的软件与jQuery的按键组合。 ##版本2.0.0 将第二级和第三级键盘引入键盘映射。 允许显示其他信息,例如{,}或@。 ##安装/快速入门 下载压缩文件并解压缩。 包括keymap.js和...
使用bootcamp进行布局,并使用jquery管理DOM。 关于 如果您需要一个投资组合网站来处理您所从事的项目,那么这个简单的模板是一个很好的起点。 Bootstrap会管理布局,以使其在移动和桌面设备上看起来都不错。 您所...
为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便。 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据。 3.通信数据格式灵活,可以是...
我的投资组合纯代码====================它在哪里? 访问它在后面做什么? HTML5 和 CSS3 响应式设计标语和部分标题的 CSS3 过渡为高像素比屏幕...IE 的 jQuery 1.x 带有 JSON 响应的电子邮件功能.htcaccess缓存文件
技术AngularJS - 因为它是 AngularJS Masonry - JavaScript 网格布局库JQuery - 砌体所需FontAwesome - 图标字体Wordpress - 易于定制和响应式设计JSON API - REST API 所需的插件安装说明下载/拉取所有文件将 ...
于是自己用ztree加bootstrap dropdown组合开发了一个下拉树选择控件。决定用webpack打包,开发一个完整的jquery控件,顺便系统的学习一下webpack。 目录结构: package.json配置: { "name": "select-tree", ...
本文我们一步一步看看使用jQuery、JSON、Ajax和微软jQuery Template插件组合实现jQuery无刷新分页,希望能给你一些帮助,感兴趣的朋友可以参考一下
避免往返服务器取数据实例源码 源码描述: 该源码初步想法是缓存在客户端的JavaScript全局变量的信息,避免服务器得到过滤信息应用过滤器 JavaScript支持JSON格式,那么我们...我们使用jQuery的JavaScript代码的组合。
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展...
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件(MIT 许可证)。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展...