jQuery使用时遇到的一些问题和解决方法

最新推荐文章于 2022-05-04 21:13:32 发布

Grance2016

最新推荐文章于 2022-05-04 21:13:32 发布

阅读量1.2k

点赞数

分类专栏： java后台技术文档文章标签： jquery 管理增删改查功能的实现

本文链接：https://blog.csdn.net/Grance2016/article/details/52633867

版权

java后台技术文档专栏收录该内容

1 篇文章 0 订阅

订阅专栏

超市账单管理系统技术实现文档

整个超市管理系统分四个模块：

一：登录模块

二：账单管理模块

三：供应商管理模块

四：用户管理模块

其中，账单管理模块，供应商管理模块，用户管理模块，分别又包括增，删，改，查四个功能，各功能模块的实现方法如下所述。

一：登录模块

（1）验证用户名和密码是否为空

在jQuery中，我用(id名).blur()的方法获取当前输入框是否失去焦点，在此方法体内，用$(this).val() 取得输入框中的内容，如果为空，则在输入框后面提示用户。如图所示：

（2）验证用户名和密码是否存在且匹配

当用户点击登录系统时，我通过jQuery中的$.post()方法将获取到的当前用户输入的用户名和密码传入Servlet，在Servlet中去数据库查询，我采用的查询语句是SELECT COUNT(1) AS num FROM usermessage WHERE username=？ AND userpassword=？；将查询结果num通过response.getWriter.write(查询结果)返回到jQuery的回调函数中，在回调函数对结果进行判断，如果num==1；则跳转到主页面，否则提示用户，让用户重新输入用户名和密码，效果如图所示：

（3）获取用户权限

在Servlet中，判断num是否等于1，如果等于1，则去数据库获取用户权限，用户的权限控制我使用了三表联查的方法，其中的sql查询语句为：SELECT c.pro_name

FROM per_user a

LEFT JOIN usermessage b ON a.upermission=b.upermission

LEFT JOIN permission c ON a.pro_id=c.pro_id

WHERE b.username=？AND b.userpassword=？

查询到权限以后，我把用户名和代表每个权限的标识符放入session中，方便界面取得这些数据。在主界面中，我通过EL表达式判断当前标识符是否为true或false，选择为用户展示哪些界面，实现效果如下所示：

①具有最高权限的管理员，可以操作三个模块的功能

②具有次高权限的经理权限，可以操作两个模块的功能

③具有最低权限的用户权限，只能操作一个模块的功能

二：账单管理模块

在账单管理模块中，值得一提的是，我没有在jsp页面中写任何提交数据的操作，也没有显示数据的操作，所有功能全部通过jQuery来实现，现将各功能的实现方法描述如下：

（1）数据显示功能

在jQuery中，通过$().ready()的方法在页面初始化时通过$.ajax()的方法去Servlet取得当前页面所要展示的数据，其中查询的sql语句为：

SELECT b.UUID,a.*,c.pname

FROM (SELECT * FROM commodity ORDER BY cid) a

LEFT JOIN commodity_id b ON a.cid=b.cid

LEFT JOIN provider c ON a.pid=c.pid

LIMIT "+(nowPage-1)*4+","+pageRow；

其中的pageRow为配置Servlet的web.xml中的初始化数据获得的，获取方法为重写init()方法中有参数的初始化方法，通过

pageRow=Integer.parseInt(config.getInitParameter("pageRow"));

获得，这里的查询语句使用了三表连查，排序查询，分页查询三个方法，

将获取到的list的实体类集合用fastjson 提供的JSON.toJSONString(list集合)的方法将数据转换成json数据，在jQuery中获取到回调函数中的数据后，用jQuery.parseJSON(json数据)进行解析，将解析好的数据通过$.each()方法进行遍历，通过$(标签名).append()的方法将获取到的数据显示到前台界面，展示效果如下所示：

（2）分页功能

对于界面的分页功能，实现起来稍许有些复杂，现将关键技术点叙述如下：

在展示完数据以后，我调用了jQuery中展示页码的功能，为了密码页码中点击事件无法监听的情况，在这里我使用了$.ajax的方法，将该方法中的async属性设置为false，将默认的异步请求转换成同步请求。在Servlet中，查询账单总数据的条数的sql语句为：

SELECT COUNT(1) AS num FROM commodity；获取到总条数后使用三目运算符，获取当前需要显示的总页数，三目运算符语句为：

int page=(num%4==0?num/4:num/4+1);将获得的总页数通过PrintWriter的write()方法将数据返回到jQuery的回调函数中，通过循环总页数和使用$(标签名).append()的方法将页码显示在界面上，在循环的过程中使用了if判断，如果此页码为当前页，则设置不同的class标签名，来控制当前页的样式与其他页的不同，初始化时默认当前页为第一页。

其中比较难的技术点应该来说是切换当前页的控制了，我给页码和上一页下一页都设置了点击事件，通过点击的页码获取到当前页码的数字$(标签名).text()来获取页码，将这个页码通过$.post()的方法将其传入后台Servlet中，通过分页查询语句查询当前页需要显示的数据。在点击上一页中，判断用户是否已在首页，如果已在首页则不操作，如果不在，则将当前页减去1传入Servlet获取数据。在点击下一页中，将当前页与总页数比较，总页数通过隐藏的input框设置，如果当前页已经等于总页数，则不做操作，如果不是，则将当前页加上1传入Servlet中。实现效果如上图所示。

（3）添加数据的功能

用户点击添加数据的时候，有一个超链接，直接跳转到添加数据的界面，具体方法实现起来相对较简单，这里不作详述。用户填入的数据是通过form表单提交到后台的，提交到后台通过request.Parameter(name名)获取用户输入的所有信息，其中添加的sql语句为：

INSERT commodity VALUES (？,？,？,？,？,？,？,？);

INSERT commodity_id VALUES (？,？);

在供应商管理的模块中我实现了添加模块的数据验证功能，具体实现方法到该模块中查询。

（4）删除数据的功能

在jQuery中，我用选中checkBox的方法实现了多条数据同时删除的功能，通过checkBox设置隐藏的input框，其中的value就是当前数据的主键id，通过$("input.option:checked")获取到当前当前被选中的checkBox的数组，遍历获取到当前选中数据的id，通过字符串拼接的方法将其拼接成一个字符串，通过$.post()方法将这个拼接的字符串传入后台Servlet中，在Servlet中使用字符串.split(分割符)的方法获取字符串数组，从而通过遍历数组删除数据，其中的sql语句为：

DELETE FROM commodity WHERE cid=?;

DELETE FROM commodity_id WHERE uuid=？;

删除以后将获取到的num值累加起来传入回调函数中，回调函数通过数据的条数和传回num值的比对，显示给用户删除成功或者失败，刷新页面的数据显示信息。

（5）修改数据的功能

在jQuery中，在修改数据的时候，用$("input.option:checked")获取到当前被选中的checkBox数组，通过数组.length获取到如果用户没有选中checkBox或者选中了多个checkBox，给用户提示，只能选中一个，当用户选中一个checkBox时，通过获得当前节点的父节点在获得此父节点的子节点的方法获取到当前父节点下所有子节点的所有信息，jQuery语句为：

var cid=option.parents("tr").find("td:eq(1)").text();

获取到数据以后，将当前的table通过remove()的方法将其移除，移除后通过append()的方法将修改界面拼接在当前界面，将获取到的数据显示在拼接后的界面上，新的界面就能在浏览器上显示出来了。这个功能最难的点应该在获取界面数据的问题上，当时想了很多种方法，后来终于通过找节点的方法解决了。修改数据的界面通过form表单提交数据给后台Servlet中，修改数据的sql语句为：

UPDATE commodity

SET cid=?, cname=?, ccount=?, money=?, pay=?, cdepict=?

WHERE cid=(SELECT cid FROM commodity_id WHERE UUID=?);

UPDATE commodity_id SET cid=? WHERE uuid=?;

使用了子查询的方式更新了数据库的信息。

（6）查找数据的功能

当前查找数据的方式是组合查询，在jQuery中，我设置了组合查询按钮的点击事件，点击以后，通过$(标签名).val()获取到当前用户输入的信息和select框中的信息，这里select框中有三种选择，如下图所示：

当用户并没有点击这个框的时候，默认用户没有选择是否付款这

一项，那我们就不管付款还是不付款都查，其中的查询sql语句为：

SELECT b.UUID,a.*,c.pname FROM commodity a

LEFT JOIN commodity_id b ON a.cid=b.cid

LEFT JOIN provider c ON a.pid=c.pid

WHERE a.cname=? ORDER BY a.ctime ;

当用户点击了已付款或者未付款，则根据付款情况进行查询，其中的查询的sql语句：

SELECT b.UUID,a.*,c.pname FROM commodity a

LEFT JOIN commodity_id b ON a.cid=b.cid

LEFT JOIN provider c ON a.pid=c.pid

WHERE a.cname=? AND a.pay=? ORDER BY a.ctime ;

查询完毕以后将查询结果返回给jQuery的回调函数中，通过解析和append()的方法显示在当前页面上。

三：供应商管理模块

对于供应商管理的模块，一些功能的实现方法与账单管理模块雷同，现将添加和修改供应商功能的异步加载验证信息模块表述如下：

在jQuery中，通过$(标签名).blur()的方法获取到当前供应商编号的输入框失去焦点，通过$(标签名).val()获取当前用户输入的供应商编号，如果当前用户没有输入供应商编号，则提示用户，如下图所示：

在添加功能时，当用户输入了供应商编号，则通过$.post()的方法转入后台查询当前所有的供应商编号信息，查询的sql语句如下：

SELECT COUNT(1) AS num FROM provider WHERE pid=?

将查询结果的num值用PriteWriter的write方法传入num值，在jQuery的回调函数对num的值进行判断，如果为1，则表示已经存在了，提示用户已存在，效果如下图所示：

当供应商编号不存在时，即num等于0时，提示用户验证成功，效果如下图所示：

在修改功能时，当用户输入的供应商编号和当前供应商编号相同时，提示用户验证成功，仅在jQuery中通过两次获取input框中的.val()属性就能获取到值就可以进行比较，不需要通过后台，当用户输入了与当前编号不同的编号时再去后台Servlet中查询，回调函数中参数的具体情况处理情况参照添加时的判断。

总结：

通过这个项目我学到了很多，主要是对于el表达式和jQuery的操作有了更进一步的成长。在jQuery中，我遇到的最大的难题应该可以说是同时获取多个值，怎么获取当前节点的其他子节点的内容，还有就是对多个相同id的标签绑定点击的时候只能绑定部分，具体的解决方法在文档里均有说明，提醒自己一点的是绑定事件是多使用精确一点的多层绑定更容易绑定全部想要绑定的标签，这一般能解决80%的绑定不上的问题。项目还有很多需要完善的地方，代码多敲多练才是硬道理。

撰稿人：Grance

日期：2016/9/22