HBuilder+eclipse开发：使用ajax异步传值生成首字母索引
使用ajax异步传值生成首字母索引大致有以下几个步骤：
1、服务器端使用servlet提取出数据库里的数据;
2、使用首字母工具类对数据进处理得到首字母;
3、再将首字母和数据一一对应存入json数组，并返回到客户端；
4、HBuilder中的html文件使用ajax接受传值并动态添加数据显示。
四点详细阐释如下：
1、用servlet提取数据库的数据应该不是什么问题，sql server、mysql等之类的数据库语句都是通用的，只是驱动和使用的jar包有所不同。
public List<baike> loadAll() throws SQLException
{
List<baike> list=new ArrayList<>();
Connection connection=null;
connection = GBUtil.get();
Statement stmt=connection.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM HotWord");
String name;
String content;
String type;
String num;
while(rs.next())
{
name=rs.getString("name").trim();
content=rs.getString("content").trim();
type=rs.getString("type").trim();
num=rs.getString("num").trim();
baike baike=new baike();
baike.setName(name);
baike.setContent(content);
baike.setType(type);
baike.setNum(num);
list.add(baike);
}
stmt.close();
connection.close();
return list;
}
在自定义的类里自定义一个调取全部数据的方法，来打包成一个集合，方便在servlet里调用。
2、对数据进行处理得到首字母：
首字母工具类（HeadUtil.java）:
package com.gb.util;
import java.util.Random;
public class HeadUtil
{
public static String getPYIndexStr(String strChinese, boolean bUpCase)
{
try
{
StringBuffer buffer = new StringBuffer();
byte b[] = strChinese.getBytes("GBK");//把中文转化成byte数组
for(int i = 0; i < b.length; i++){
if((b[i] & 255) > 128)
{
int char1 = b[i++] & 255;
char1 <<= 8;
int chart = char1 + (b[i] & 255);
buffer.append(getPYIndexChar((char)chart, bUpCase));
continue;
}
char c = (char)b[i];
if(!Character.isJavaIdentifierPart(c))
c = 'A';
buffer.append(c);
}
return buffer.toString().toUpperCase();
}
catch(Exception e)
{
System.out.println((new StringBuilder()).append("\u53D6\u4E2D\u6587\u62FC\u97F3\u6709\u9519").append(e.getMessage()).toString()); }
return null;
}
private static char getPYIndexChar(char strChinese, boolean bUpCase){
int charGBK = strChinese;
char result;
if(charGBK >= 45217 && charGBK <= 45252)
result = 'A';
else
if(charGBK >= 45253 && charGBK <= 45760)
result = 'B';
else
if(charGBK >= 45761 && charGBK <= 46317)
result = 'C';
else
if(charGBK >= 46318 && charGBK <= 46825)
result = 'D';
else
if(charGBK >= 46826 && charGBK <= 47009)
result = 'E';
else
if(charGBK >= 47010 && charGBK <= 47296)
result = 'F';
else
if(charGBK >= 47297 && charGBK <= 47613)
result = 'G';
else
if(charGBK >= 47614 && charGBK <= 48118)
result = 'H';
else
if(charGBK >= 48119 && charGBK <= 49061)
result = 'J';
else
if(charGBK >= 49062 && charGBK <= 49323)
result = 'K';
else
if(charGBK >= 49324 && charGBK <= 49895)
result = 'L';
else
if(charGBK >= 49896 && charGBK <= 50370)
result = 'M';
else
if(charGBK >= 50371 && charGBK <= 50613)
result = 'N';
else
if(charGBK >= 50614 && charGBK <= 50621)
result = 'O';
else
if(charGBK >= 50622 && charGBK <= 50905)
result = 'P';
else
if(charGBK >= 50906 && charGBK <= 51386)
result = 'Q';
else
if(charGBK >= 51387 && charGBK <= 51445)
result = 'R';
else
if(charGBK >= 51446 && charGBK <= 52217)
result = 'S';
else
if(charGBK >= 52218 && charGBK <= 52697)
result = 'T';
else
if(charGBK >= 52698 && charGBK <= 52979)
result = 'W';
else
if(charGBK >= 52980 && charGBK <= 53688)
result = 'X';
else
if(charGBK >= 53689 && charGBK <= 54480)
result = 'Y';
else
if(charGBK >= 54481 && charGBK <= 55289)
result = 'Z';
else
result = (char)(65 + (new Random()).nextInt(25));
if(!bUpCase)
result = Character.toLowerCase(result);
return result;
}
}
HeadUtil这个类里面的这个getPYIndexStr方法就是用来得到首字母的，不过如果是英文开头的话就是首字母，词语的话是每个汉字的首字母，就用到servlet里后续的截取字符串了。
3、首字母的servlet如下，已经对关键步骤进行了注释：
package servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.gb.util.HeadUtil;
import com.alibaba.fastjson.JSONObject;
import com.gb.model.baike;
import com.gb.util.CheckIfExists;
@WebServlet("/shouzimuservlet")
public class shouzimuservlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public shouzimuservlet()
{
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//添加允许跨域访问语句
response.setHeader("Access-Control-Allow-Origin", "*");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
//得到客户端传来的数据，判断确认是首字母索引，继续进行操作
String method = request.getParameter("method");
System.out.println("method");
if(method.equals("shouzimu"))
{
//引入包含调取数据库数据的方法的类
CheckIfExists checkIfExists=new CheckIfExists();
//jsonObject
//初始化
JSONObject json = new JSONObject();
List<JSONObject> jsons = new ArrayList<>();
List<baike> list=new ArrayList<>();
try
{
//调取全部数据
list=checkIfExists.loadAll();
}
catch (Exception e)
{
e.printStackTrace();
}
String string;
String str;
JSONObject json1=null;
//循环遍历，对取得数据集合中的每个数据进行操作
for(baike baike:list)
{
//定义字符串为该对象名称
string= baike.getName();
//调用HeadUtil工具类中的方法调取名称的首字母（这样取得的是每个字的首字母，例如：字母，得到的就是ZM）
string=HeadUtil.getPYIndexStr(string,true);
//字符串截取得到第一个即为首字母
str=string.substring(0, 1);
json1 = new JSONObject();
//向json中放入数据
json1.put("zimu",str);
json1.put("name",baike.getName());
//向json数组中放入json对象
jsons.add(json1);
System.out.println(json1.get("zimu"));
System.out.println(json1.get("name"));
}
System.out.println(jsons);
response.setCharacterEncoding("utf-8");
//输出数据
response.getWriter().write(jsons.toString());
}
}
}
4、客户端的html文件书写：
我在html书写时使用了较为便捷的layui框架，因为HBuilder这种html转安卓App的开发，html要做到自适应这一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<link rel="stylesheet" href="../assets/css/layui.css">
<link rel="stylesheet" href="../assets/css/admin.css">
</head>
<body onload="init()"> <!-- body里的onload方法，开局引用init() -->
<!-- 写好A~Z 26个下拉菜单的第一层，内层使用ajax动态添加--> <button class="layui-btn layui-btn-normal" style="width:100%">首字母分类</button>
<div class="layui-collapse" lay-accordion="">
<div class="layui-colla-item">
<h2 class="layui-colla-title">A<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content layui-show" id="inside1"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">B<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside2"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">C<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside3"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">D<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside4"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">E<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside5"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">F<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside6"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">G<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside7"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">H<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside8"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">I<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside9"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">J<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside10"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">K<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside11"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">L<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside12"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">M<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside13"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">N<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside14"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">O<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside15"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">P<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside16"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">Q<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside17"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">R<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside18"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">S<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside19"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">T<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside20"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">U<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside21"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">V<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside22"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">W<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside23"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">X<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside24"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">Y<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside25"> </div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">Z<i class="layui-icon layui-colla-icon"></i></h2>
<div class="layui-colla-content" id="inside26"> </div>
</div>
</div>
</body>
</html>
<script src="../assets/layui.all.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function init()
{
$.ajax
({
type:'GET',
url:'http://服务器的ip地址:端口号/HotWord1/shouzimuservlet',//服务器的servlet地址
data:
{
method:'shouzimu'//对应服务器端method接受的发送请求
},
success:function(data)
{
var j;
//循环遍历
for(j=65;j<91;j++)//65~91是阿斯卡码表里A~Z，在下面就把这些数变成字母来进行和数据首字母的比对
{
var str=String.fromCharCode(j);//将循环的数据变成字符
var inside = document.getElementById('inside'+(j-64)); //获取页面写好的标签
var html = '';
var i;
for(i=0;i<data.length;i++)
{
if(str==data[i].zimu)//如果数据的首字母和当前字母一样，用html动态添加
{
//定义html
html += '<p><a href="https://baike.baidu.com/item/'+data[i].name+'">'+data[i].name+'</a></p><hr />'; } }
inside.innerHTML = html;//添加显示
}
},
error:function(error)
{
console.log('出现错误！')//
},
dataType:'json'//数据类型为json
});
}
</script>
大概就是如下效果了：
问题及解决：
1、问题：例如数据里马云、马化腾，都是首字母M开头，最开始在显示时出现了动态添加替换，就是先是动态添加了马云，之后马化腾替换掉了马云，每个首字母下只有一个数据。
2、解决：在对动态添加这部分代码进行循环的修改和内外层循环调整之后，问题得到了解决。
HBuilder+eclipse开发：使用ajax异步传值生成首字母索引的更多相关文章
- JSON.stringify实例应用—将对象转换成JSON类型进行AJAX异步传值
在上一篇中,对JSON.stringify()方法有了初步的认识,并且做了一些简单的例子.本篇将进一步将JSON.stringify用在复杂些的实例中,例如如下需求: 在进jQuery AJAX异步传 ...
- Jquery ajax异步传值的两个实用的方法，你看后肯定会用第二个
故名思议,你是个asp.net 或者是搞PHP的或者 是javaweb的 ,但是为了提高界面的效率,你必须会实用jquery的ajax,当然,在ajax异步传值的时候很头疼的一件事情就是,拼接字符串 ...
- 前端ajax异步传值以及后端接收参数的几种方式
原文参考 异步传值 前台往后台传值呢,有很多种方式,大家听我细细道来. 第一种呢,也是最简单的一种,通过get提交方式,将参数在链接中以问号的形式进行传递. // 前台传值方法 // 触发该方法调用a ...
- Ajax异步传值总结
Ajax异步传值 将数据从前台传向后台: 1:通过get方式,将参数在链接中,配合“?”进行传值. 实例: //前台传值方法 //触发该方法调用ajax function testAjax(yourD ...
- 解决用Eclipse开发Android程序时不能生成R.java的问题
今天我照着Mars老师的视频教程开始学习Android程序开发. 但是,我的Eclipse死活不能生成R.java文件,新建的工程也不行. 然后我百度,百度出来的结果一般是说这样解决: 1.clean ...
- php汉字生成首字母
function getfirstchar($s0){ $fchar = ord($s0{}); }); $s1 = iconv("UTF-8","gb2312" ...
- java生成首字母拼音简码的总结
百度找到了某论坛高人写的java(具体论坛记不清了),直接用来调用,再次非常感谢,基本上实现了我的需求 package MD5;import java.util.Scanner;public clas ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定单词首字母大写
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- ASP.NET MVC 网站开发总结（五）——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
随机推荐
- HTML5学习路线导航
一.基本标签元素 1.基础标签第一篇 2.基础标签第二篇 3.表单form的使用 4.新增表单验证 二.CSS样式表 4.CSS插入样式表的三种格式 5.六大选择器 6.样式内容详细讲解 7.背景渐进 ...
- zookeeper测试代码
package com.sjt.test; import java.util.List; import java.util.concurrent.CountDownLatch; import org. ...
- PAT A1010.Radix 二分法
PAT A1010.Radix 链接: https://pintia.cn/problem-sets/994805342720868352/problems/994805507225665536 算法 ...
- RT-thread内核对象--事件集
rt-thread 线程的同步:线程同步是指多个线程通过特定的机制(如互斥量,事件对象,临界区)来控制线程之间的执行顺序 1.事件集:(可以实现一对多,多对多的同步) RT-Thread 定义的事 ...
- qq通讯录
- 虚方法(virtual)和抽象方法(abstract)的和接口(interface)的区别
虚方法(virtual)和抽象方法(abstract)的区别 2017年06月15日 13:41:26 阅读数:65 注:本文转载自 http://www.cnblogs.com/michaelxu/ ...
- mysql自定义时间段分组
说明:一下是自定义7天为一个时间段的分组统计 select datediff(ms_time, '开始时间') div 7 as time , count(*) count,sum(money) mo ...
- 学习Acegi应用到实际项目中（7）- 缓存用户信息
在默认情况下,即在用户未提供自身配置文件ehcache.xml或ehcache-failsafe.xml时,EhCache会依据其自身Jar存档包含的ehcache-failsafe.xml文件所定制 ...
- laravel 打印完整sql
DB::connection()->enableQueryLog(); // 开启QueryLog \App\User::find(1); dump(DB::getQueryLog());
- 第50章：Java操作MongoDB-MongoDB和Spring
① Spring通过Spring Data MongoDB模块来集成和支持MongoDB ②Maven加入lib包 <dependency> <groupId>org.spri ...