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异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
随机推荐
- Mysql必知必会 第三章 使用Mysql
第三章 使用Mysql SQL语句和大小写 请注意,SQL语句不区分大小写,因此SELECT与select是相同的.同样,写成Select也没有关系.许多SQL开发人员喜欢对所有SQL关键字使用大写, ...
- dotNet程序员的Java爬坑之旅（一）
仔细想了下还是转java吧,因为后期不管是留在北京也好还是回老家也好,java的工作都会好找一点.现在的工作主要还是写.net,目标是下一次离职的时候可以找到一份全职的java工作,我一直都觉得实践才 ...
- openstack 王者归来学习笔记
rpc.call方法执行的流程:(下次看代码的时候可以根据这流程来看,注意:由于rpc服务器和客户端具有很松的耦合性,因此以上步骤并不是绝对的.) 1.rpc服务器定义和启动rpc服务 2.rpc服务 ...
- 关于mysql存储过程中传decimal值会自动四舍五入的这个坑
容我说几句题外话:我的工作日常是用微软系的,SQL SERVICE 存储过程很强大,我也很习惯很喜欢用存储过程.和MySQL结缘,是在五年前,因为一些原因,公司要求用开源免费的数据库.很多时候,用my ...
- TwinStickShooter的一些问题
TwinStickShooter模板应该是比较好的了解UE基本Pawn和Projectile的一个C++例子.以下是一些问题. 一.这个模板以纯C++编写,没有蓝图,所以第一步,我想测试下如何引用蓝图 ...
- squid日志详解
quid的日志很重要.常常要了解的,其中最重要的就是命中率啦,不然反向代理做的用就不大. cat access.log|gawk ‘{print $4}’|sort|uniq -c|sort -nr ...
- java 排序算法
1.冒泡排序 public static void main(String[] args) { int[] arr={6,3,8,2,9,1}; System.out.println("排序 ...
- metasploit生成payload的格式
转自https://www.cnblogs.com/zlgxzswjy/p/6881904.html Often one of the most useful (and to the beginner ...
- php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...
- REdis MASTER aborted replication NOAUTH Authentication required
对于REdis集群,如果设置了requirepass,则一定要设置masterauth,否则从节点无法正常工作,查看从节点日志可以看到哪下内容:19213:S 22 Apr 2019 10:52:17 ...