jquery ajax例子
（1）取得服务端当前时间
jquery对象.load(url,sendData,function(backData,textStatus,xhr){... ...})
load()：如果无参的话，就以GET方式发送
如果有参的话，就以POST方式发送
（2）检查注册用户名是否存在
$.get(url,sendData,function(backData,textStatus,xhr){... ...})
$.post(url,sendData,function(backData,textStatus,xhr){... ...})
getTime.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="button" value="获取时间"/>
<hr/>
<div></div>
<script type="text/javascript">
$(":button").click(function(){
/*
url表示异步请求的路径
sendData表示发送的数据，该数据的格式为{"key":value,"key":value}
function(){}表示回调处理函数，由服务端触发，类似于xhr.onreadystatechange
*/
var url = "/jsExamples/TimeServlet?time="+new Date().getTime();
var sendData = {"username":"杰克","password":"102030"};
//哪个jquery对象调用load()方法，
//返回值就设置到这个jquery对象的html()方法中
$("div").load(url,sendData,function(backData,textStatus,xhr){
alert(backData+":"+textStatus+":"+xhr.status)
});
});
</script>
</body>
</html>
TimeServlet.java
package cn.itcast.web.servlet; import java.io.IOException;
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class TimeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
DateFormat df = DateFormat.getDateTimeInstance(
DateFormat.FULL,
DateFormat.DEFAULT,
Locale.CHINA);
String now = df.format(new Date());
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(now);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String ip = request.getRemoteAddr();
if(ip.equals("127.0.0.1")){
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username+":"+password);
}
}
}
ajax_2.jsp 调用$.get()方法
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
用户名[GET]：<input type="text"/><span></span>
<script type="text/javascript">
$(":text").blur(function(){
//获取用户在文本框中填入的值
var username = $(this).val();
//去空格
username = $.trim(username);
//判断
if(username==null || username.length==0){
$("span").html("用户名必填");
}else{
/*
回调函数有三个参数：
backData:表示服务端返回的数据
textStatus:表示服务端返回的数据的文本表达，如果成功，返回success
xhr:表示ajax引警对象
*/
var url = "/day30/UserServlet?time="+new Date().getTime();
var sendData = {"username":username};
$.get(url,sendData,function(backData,textStatus,xhr){
//定位span标签
var $span = $("span");
//将清span标签中的内容
$span.html("");
//创建img标签
var $img = $("<img src='" + backData + "'/>")
//将img标签设置到span标签内部，形成父子关系
$span.append( $img );
});
}
});
</script>
</body>
</html>
ajax_3.jsp调用 $.post()方法
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
用户名[POST]：<input type="text" name="username"/>
<span></span>
<script type="text/javascript">
$(":text").blur(function(){
//获取用户在文本框中填入的值
var username = $(this).val();
//去空格
username = $.trim(username);
//判断
if(username==null || username.length==0){
$("span").html("<font color='red'><b>用户名必填</b></font>");
}else{
/*
回调函数有三个参数：
backData:表示服务端返回的数据
textStatus:表示服务端返回的数据的文本表达，如果成功，返回success
xhr:表示ajax引警对象
*/
var url = "/day30/UserServlet?time="+new Date().getTime();
//var sendData = {"username":username};传统
var sendData = $(":text").serialize();//优化
$.post(url,sendData,function(backData,textStatus,xhr){
//定位span标签
var $span = $("span");
//将清span标签中的内容
$span.html("");
//创建img标签
var $img = $("<img width='30' height='30' src='" + backData + "'/>")
//将img标签设置到span标签内部，形成父子关系
$span.append( $img );
});
}
});
</script>
</body>
</html>
UserServlet.java
package cn.itcast.web.servlet; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
String username = request.getParameter("username");
byte[] buf = username.getBytes("ISO8859-1");
username = new String(buf,"UTF-8");
String imagePath = "images/MsgSent.gif";
if("哈哈".equals(username)){
imagePath = "images/MsgError.gif";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(imagePath);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String imagePath = "images/MsgSent.gif";
if("哈哈".equals(username)){
imagePath = "images/MsgError.gif";
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(imagePath);
}
}
jquery ajax例子的更多相关文章
- 一个jquery ajax例子
上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了. 1.新建一个 ...
- jquery ajax 应用返回类型是html json
jquery ajax 例子: function JudgeUserName() { $.ajax({ type:"GET&q ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
- WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
- Django1.7+JQuery+Ajax集成小例子
Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...
- jQuery Ajax 方法调用 Asp.Net WebService 以及调用aspx.cs中方法的详细例子
一.jQuery Ajax 方法调用 Asp.Net WebService (引自Terry Feng) Html文件 <!DOCTYPE html PUBLIC "-//W3C//D ...
- jquery ajax请求后台 的简单例子
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
随机推荐
- jdbc连接遭遇RAC设备
今天进行junit的Case回归测试,功能测试人员告知数据库ip进行了变更,于是 将jdbc连接的url进行了相应的变更如下 jdbcConnection = java.sql.DriverManag ...
- JDK1.6官方下载_JDK6官方下载
JDK1.6官方下载_JDK6官方下载地址: http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin ...
- Android图片加载框架最全解析（一），Glide的基本用法
现在Android上的图片加载框架非常成熟,从最早的老牌图片加载框架UniversalImageLoader,到后来Google推出的Volley,再到后来的新兴军Glide和Picasso,当然还有 ...
- OpenCV学习(21) Grabcut算法详解
grab cut算法是graph cut算法的改进.在理解grab cut算之前,应该学习一下graph cut算法的概念及实现方式. 我搜集了一些graph cut资料:http://yunpan. ...
- C++ string 字符串查找匹配
在写C++程序中,总会遇到要从一个字符串中查找一小段子字符串的情况,对于在C中,我们经常用到strstr()或者strchr()这两种方法.而对于C++的string,我们往往会用到find(). C ...
- [转]【Delphi】 Thread.Queue与Synchronize的区别
前话: 其实大家要学会看源码, 我接下来要说的这些东东,与其等别人讲,还不如自己搞几个代码试一下,印象还深刻点 TThread.Queue和TThread.Synchronize的区别,效果上:二者 ...
- 求两个数中的较大值max(a,b)。(不用if，>)
题目:求两个数的较大值,不能使用if.>. 1.不使用if.>,还要比较大小,貌似就只能使用条件表达式: x=<表达式1>?<表达式2>:<表达式3>; ...
- go语言基础之go猜数字游戏
1. 产生一个随机的4位数 示例1: package main import "fmt" import "math/rand" import "tim ...
- python pandas.Series&&DataFrame&& set_index&reset_index
参考CookBook :http://pandas.pydata.org/pandas-docs/stable/cookbook.html Pandas set_index&reset_ind ...
- XML中PCDATA与CDATA的区别
XML中PCDATA与CDATA的区别 2011-02-10 19:27:25| 分类: XML | 标签:xml中pcdata与cdata的区别 字号:大中小 订阅 所有 XML 文档中 ...