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实现playfair和hill密码算法
Dec 07 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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配置文件中最常用四个ini函数
2007/03/19 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python循环语句中else的用法总结
2016/09/11 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python实现神经网络感知器算法
2017/12/20 Python
python简单操作excle的方法
2018/09/12 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
外贸采购员求职的自我评价
2013/11/26 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
中职生求职信
2014/07/01 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
鸡毛信观后感
2015/06/11 职场文书
python_tkinter事件类型详情
2022/03/20 Python