jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
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文件，页面如下所示：
当输入admin时，页面如下所示：
当输入其他的字符时，页面如下所示：
可以看出jquery能够实现ajax的功能，并且代码更简洁了。
只是，最后本人有一个问题迟迟没有解决，那就是输入中文时传到后台的值乱码，按照网上的好多办法都没有解决掉，不知道为什么，谁有更好的方法希望能给我推荐一下，本人不胜感激。
这是本人学习的结果，允许转载，欢迎交流，但转载务必给出本文章的链接地址
相关推荐
-
PHP 与 js的通信（via ajax,json）
JavaScript端: 注意:一定要设置xmlHttp.setRequestHeader,否则传往PHP的参数会变成null(line 38) 亮点在line 31! 复制代码 代码如下: <script type="text/javascript"> function GetJson() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch
-
c#实现简单控制台udp异步通信程序示例
实现客户端发送请求,服务器端响应机制 UDP客户端代码 复制代码 代码如下: using System;using System.Text;using System.Net;using System.Net.Sockets; namespace Client{ class Program { //客户端 Socket对象 private static Socket clientSocket; //服务器端 终点 private
-
Ajax与服务器（JSON）通信实例代码
Ajax与服务器(JSON)通信 Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中创建出更好地打用户体验来.Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面.这两种方式都称不上是良好的用户体验. Ajax提供了两类服务器通信手段:同步通信和异步通信. 异步通信Ajax
-
使用Ajax与服务器（JSON）通信实例
Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中创建出更好地打用户体验来. Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面.这两种方式都称不上是良好的用户体验. Ajax提供了两类服务器通信手段:同步通信和异步通信. 异步通信Ajax比同步通信要常见的多了,大概是9
-
JavaScript Ajax实现异步通信
JavaScript Ajax实现异步通信 一.浏览器与服务器的同步和异步通信 1.同步:是阻塞的,浏览器在向服务器发送请求之后一直等待服务器的响应,而没有做其他事情. 2.异步:非阻塞的,浏览器向服务器发送请求之后,继续执行其他代码,知道服务器响应,浏览器中断当前的任务,处理服务器响应. 二.没有Ajax之前浏览器是通过iframe来实现异步刷新 1.iframe标签:iframe标签通过src连接到一个页面,其实就是将需要实现异步刷新的内容使用 iframe标签包裹, A.对iframe实现
-
AJAX简单异步通信实例分析
本文实例讲述了AJAX简单异步通信的方法.分享给大家供大家参考.具体分析如下: 客户端:向服务器发出一个空请求. 代码如下: <html> <head> <title>XMLHttpRequest</title> <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHtt
-
详解C# Socket异步通信实例
TCPServer 1.使用的通讯通道:socket 2.用到的基本功能: ①Bind, ②Listen, ③BeginAccept ④EndAccept ⑤BeginReceive ⑥EndReceive 3.函数参数说明 Socket listener = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); 新建socket所使用的参数均为系统预定义的量,直接选取使用. listener.B
-
C#基于UDP进行异步通信的方法
本文实例讲述了C#基于UDP进行异步通信的方法.分享给大家供大家参考.具体如下: 服务器端: using System; using System.Collections.Generic; using System.Text; using System.Net; using System.Net.Sockets; using System.Threading; namespace AsyncServer { public class UdpState { public UdpClient udp
-
深入理解Android中的Handler异步通信机制
一.问题:在Android启动后会在新进程里创建一个主线程,也叫UI线程(非线程安全)这个线程主要负责监听屏幕点击事件与界面绘制.当Application需要进行耗时操作如网络请求等,如直接在主线程进行容易发生ANR错误.所以会创建子线程来执行耗时任务,当子线程执行完毕需要通知UI线程并修改界面时,不可以直接在子线程修改UI,怎么办? 解决方法:Message Queue机制可以实现子线程与UI线程的通信. 该机制包括Handler.Message Queue.Looper.Handler可以把
-
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样"write less ,do more".Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力. 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载. 这次通信用的是jquery的jQuery.post(url,[data], [callback],[type
-
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定. 先来看看代码,本人看着源代码定制了自己想要的效果: 复制代码 代码如下: <%@ page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DO
-
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
在Web中用到多选项卡功能的网站有很多,比如163和126邮箱,用过的人知道.本人在那么多的类似插件中,目前碰到这个比较好,花了点时间调试出来了,请看效果图: 这款插件叫jqueryMagicTabs,上图实现了基本功能,如添加选项卡,选择指定的选项卡.当添加的选项卡超过一定长度时会出现左右滑动的按钮,同时支持鼠标滑动选项卡. 这段代码如下所示: 复制代码 代码如下: <%@ page language="java"contentType="text/html; cha
-
jQuery学习笔记之回调函数
1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1
-
那些年，我还在学习jquery 学习笔记
原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad
-
jQuery学习笔记之Ajax用法实例详解
本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.
-
jQuery学习笔记之入门
最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看
-
jquery学习笔记之无new构建详解
前言 当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是直接使用类似$(ele)的方式去构建出来一个jquery对象呢?其实内部还是使用了new来构建的,只是jquery内部帮我们构建了而已,请看下面代码 function Jquery(selector, context) { return new Jquery(selector, context
-
jQuery学习笔记之Helloworld
jQuery是什么? jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等.jQuery是继prototype之后又一个优秀的Javascrīpt框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, F
-
jQuery学习笔记之总体架构
先来看代码: 复制代码 代码如下: (function (window, undefined) { //构建jQuery对象 var document = window.document, navigator = window.navigator, location = window.location; var jQuery = (function () {