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大大简化了我们的操作,不用考虑浏览器的诧异了. ...
随机推荐
- [翻译] FMDB
FMDB https://github.com/ccgus/fmdb This is an Objective-C wrapper around SQLite: http://sqlite.org/ ...
- [翻译] 使用开源库 JGDownloadAcceleration 控制下载队列，断点下载，加速下载
JGDownloadAcceleration 本人对原文进行了翻译,凑合看看,使用心得以后补上 https://github.com/JonasGessner/JGDownloadAccelerati ...
- 基于Android的ELF PLT/GOT符号重定向过程及ELF Hook实现（by 低端码农 2014.10.27）
引言 写这篇技术文的原因,主要有两个: 其一是发现网上大部分描写叙述PLT/GOT符号重定向过程的文章都是针对x86的.比方<Redirecting functions in shared EL ...
- [Android Pro] Android源码编译之Nexus5真机编译
reference to : http://blog.csdn.net/liu1075538266/article/details/51272398 1. 前言 在Android安全的研究工作中, ...
- R语言缺点
R的优点:免费,开源,体积小.缺点:对大文本处理差,另外一个也在于开源,package如果出错,烦死你.当你跑比较大的simulation,对效率有要求的时候,有时还是不得不用C,这可能是10小时和1 ...
- [每日一题] OCP1z0-047 :2013-08-04 INSERT --- WITH CHECK OPTION
这题是考:insertWITH CHECK OPTION的用法 insert into (<select clause> WITH CHECKOPTION) values (...) 这样 ...
- Python中scatter函数参数用法详解
1.scatter函数原型 2.其中散点的形状参数marker如下: 3.其中颜色参数c如下: 4.基本的使用方法如下: #导入必要的模块 import numpy as np import matp ...
- Android制作曲线、柱状图、饼形等图表——使用AChartEngine
之前在java开发中实现图表使用JFreeChar组件,最近有个小项目要求在Android端进行数据分析,如何实现图表呢?查了一下google提供了一个开源组件Achartengine非常好用,可实现 ...
- POJ 2488 A Knight's Journey
A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29226 Accepted: 10 ...
- Android -- Camera聚焦流程
Camera.java autoFocus()聚焦回调函数 @Override public void autoFocus() { //记录当前聚焦开始时间 mFocusStartTime = Sys ...