jQuery学习笔记(1)——用jQuery实现异步通信的具体思路(用json传递值)

JQuery是时下流行的js库，用简单的代码就能做出理想的效果，就像官网说的“少写多做”。在某种程度上，jquery改写了之前对JavaScript的编写，所以我会用jquery达到上一章与ajax异步通信的效果，感受Jquery的魅力。首先，您需要下载jquery的最新js文件，并将其引入文件中。也可以在这里下载：点击我下载。这种通信使用jquery。jquery的POST (URL、[data]、[callback]、[type])方法，是一个简单的POST请求函数，用来替换复杂的$.ajax，请求成功后调用回调函数。参数有：URL、【数据】、【回调】，【类型】对应的参数类型有字符串、映射、函数、字符串： url:发送请求地址。要发送的数据：键/值参数。callback:发送成功时的回调函数。

:型返回内容格式，xml，html，脚本，json，文本，_默认值)新建一个jsp文件jqueryDemo.jsp，代码如下所示：复制代码代码如下：%@页面语言=' Java '内容类型=' text/html；charset=GB18030 '页面编码=' GB18030 ' %！DOCTYPE html PUBLIC '-//W3C//DTDHTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/html 4/loose。dtd ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=GB18030 ' title jquery/title style type=' text/CSS '表格。演示{边框-折叠：折叠；边距-top : 50px；边距-左侧： 220 px} table.demo th，TD { padd : 0；border: 1px固体# 000;} #img，# msg { position: static向左浮动：} #帐户，#密码1，#密码2 {左边距： 10px} # img {左边距： 10px}/style脚本类型=' text/JavaScript ' src=' http : jquery/jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript '函数account check(){ var account=$(' # account ').val()；if(account==''){ alert('用户帐号不能为空!');$('#img ').html(" ")；$('#msg ').文本("");返回；} $.post('JqueryServlet '，{strAccount:account}，function(data){ eval(' data=' data ')；if(data.success){ $('#img ').html(' img src=' img/cross。png '/')；}else{ $('#img ').html(' img src=' img/tick。png '/')；} $('#msg ').文本(数据。味精)；});}/script/head body form action=' method=' post ' table class=' demo ' style=' width : 450 px；'高度： 200px'tr td colspan=3 align=中心新用户注册/TD/tr/tr TD style=' width :90 px；'用户帐号：/TD TD style=' width :185 px；'输入类型=' text ' id=' account ' name=' account ' on bulr=' account CheCk()；font color=red */font/TD TD style=' width :175 px；div id=' img ' class=' img '/div div id=' msg ' class=' msg '/div/TD/tr TD用户密码：/TD TD输入类型=' password ' id=' password 1 ' name=' password 1 '/TD TD/TD/tr tr TD重复密码：/TD TD输入类型=' password ' id=' password 2 ' name=' password 2 '/TD TD/TD/tr TD col span=3 align=center输入类型=' submit ' value='注册/td /tr /table /form /body /html新建一个小型应用程序文件JqueryServlet.java，代码如下所示：复制代码代码如下：套餐。ldfsoft。servlet导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletresponse/** *Servlet实现类JqueryServlet */公共类JqueryServlet extendsHttpServlet {私有静态最终长串行版本id=1L；/* * * @参见httpersvlet # httpersvlet()*/public jqueryServlet(){ super()；//TODO自动生成的构造函数存根}/* * * @请参见HttpServletRequest服务(HttpServletRequest，HttpServletResponse响应)*/protectedvoid服务(HttpServletrequest请求，HttpServletResponse响应)throwsServletException，IOException { //TODO自动生成的方法存根请求。setcharacter encoding(' utf-8 ')；回应。setcontenttype(' text/html；charset=utf-8 ')；字符串帐户=请求。getparameter(' strAccount ')；PrintWriter out=响应。getwriter()；字符串str=//用以json传值if(account。等于(' admin '){ str=' { success : true，msg: '该账户已存在'}';}else{ str='{success:false，msg: '该账户可以使用'}';}出去。write(字符串)；} } 好了，现在可以运行了，打开服务器，运行此jsp文件，页面如下所示

当你进入admin时，页面看起来是这样的：。

输入其他字符时，页面如下：。

可见jquery可以实现ajax功能，代码更加简洁。但是最后我有一个长期没有解决的问题，就是中文输入时传输到后台的乱码值，没有按照很多在线的方法解决。我不知道为什么，但我很感谢任何有更好方法推荐给我的人。这是我学习的结果。允许转载，欢迎交流，但转载时必须给出本文链接地址。