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


Posted in Javascript onApril 08, 2013

       jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样“write less ,do more”。Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力。

     首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载。

     这次通信用的是jquery的jQuery.post(url,[data][callback],[type])方法,这是一个简单的POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。参数为:url,[data],[callback],[type] 相对应的参数类型为String,Map,Function,String:

     ●url:发送请求地址。

     ●data:待发送 Key/value参数。

     ●callback:发送成功时回调函数。

     ●type:返回内容格式,xml,html, script, json, text, _default)

     新建一个jsp文件jqueryDemo.jsp,代码如下所示:

<%@ page language="java"contentType="text/html; charset=GB18030" 
pageEncoding="GB18030"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type"content="text/html; charset=GB18030"> 
<title>jquery</title> 
<style type="text/css"> 
table.demo{border-collapse: collapse;margin-top: 50px;margin-left: 220px;} 
table.demo th,td {padding: 0; border: 1px solid #000;} 
#img,#msg{position: static;float: left;} 
#account,#password1,#password2{margin-left: 10px;} 
#img{margin-left: 10px;} 
</style> 
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
function accountCheck(){ 
var account=$('#account').val(); 
if(account==""){ 
alert("用户帐号不能为空!"); 
$('#img').html(""); 
$('#msg').text(""); 
return; 
} 
$.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').text(data.msg); 
}); 
} 
</script> 
</head> 
<body> 
<form action=""method="post" > 
<table class="demo" style="width: 450px;height: 200px;"> 
<tr> 
<td colspan=3 align=center>新用户注册</td> 
</tr> 
<tr> 
<td style="width:90px; ">用户帐号:</td> 
<td style="width:185px; "><input type="text"id="account" name="account"onblur="accountCheck();"><font color=red>*</font></td> 
<td style="width:175px; "> 
<div id="img" class="img"></div> 
<div id="msg"class="msg"></div> 
</td> 
</tr> 
<tr> 
<td>用户密码:</td> 
<td><input type="password"id="password1" name="password1"></td> 
<td></td> 
</tr> 
<tr> 
<td>重复密码:</td> 
<td><input type="password"id="password2" name="password2"></td> 
<td></td> 
</tr> 
<tr> 
<td colspan=3 align=center><input type="submit"value="注册"></td> 
</tr> 
</table> 
</form> 
</body> 
</html>

     新建一个servlet文件JqueryServlet.java,代码如下所示:

package com.ldfsoft.servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
importjavax.servlet.http.HttpServletRequest; 
importjavax.servlet.http.HttpServletResponse; 
/** 
*Servlet implementation class JqueryServlet 
*/ 
public class JqueryServlet extendsHttpServlet { 
privatestatic final long serialVersionUID = 1L; 
/** 
* @see HttpServlet#HttpServlet() 
*/ 
public JqueryServlet() { 
super(); 
// TODO Auto-generated constructor stub 
} 
/** 
* @see HttpServlet#service(HttpServletRequestrequest, HttpServletResponse response) 
*/ 
protectedvoid service(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException { 
//TODO Auto-generated method stub 
request.setCharacterEncoding("utf-8"); 
response.setContentType("text/html;charset=utf-8"); 
String account=request.getParameter("strAccount"); 
PrintWriter out=response.getWriter(); 
String str=""; //用以json传值 
if(account.equals("admin")){ 
str="{success:true,msg:'该账户已存在'}"; 
}else{ 
str="{success:false,msg:'该账户可以使用'}"; 
} 
out.write(str); 
} 
}

     好了,现在可以运行了,打开服务器,运行此jsp文件,页面如下所示:

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

    当输入admin时,页面如下所示:

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

     当输入其他的字符时,页面如下所示:

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

     可以看出jquery能够实现ajax的功能,并且代码更简洁了。

     只是,最后本人有一个问题迟迟没有解决,那就是输入中文时传到后台的值乱码,按照网上的好多办法都没有解决掉,不知道为什么,谁有更好的方法希望能给我推荐一下,本人不胜感激。

      这是本人学习的结果,允许转载,欢迎交流,但转载务必给出本文章的链接地址

Javascript 相关文章推荐
JavaScript前补零操作实例
Mar 11 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 #Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 #Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 #Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 #Javascript
JS继承--原型链继承和类式继承
Apr 08 #Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 #Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 #Javascript
You might like
PHP 工厂模式使用方法
2010/05/18 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP中文编码小技巧
2014/12/25 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
详解python 爬取12306验证码
2019/05/10 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python把一个字符串切开的实例方法
2020/09/27 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
历史学专业求职信
2014/06/19 职场文书
学术会议邀请函
2015/01/30 职场文书
小学安全教育主题班会
2015/08/12 职场文书