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大大简化了我们的操作,不用考虑浏览器的诧异了. ...
随机推荐
- [翻译] AnimatedPath 动画路径（持续更新）
AnimatedPath动画路径 感谢原作者分享精神,有空补上使用教程 https://github.com/twotoasters/AnimatedPath AnimatedPath explore ...
- Android图片加载框架最全解析（三），深入探究Glide的缓存机制
在本系列的上一篇文章中,我带着大家一起阅读了一遍Glide的源码,初步了解了这个强大的图片加载框架的基本执行流程. 不过,上一篇文章只能说是比较粗略地阅读了Glide整个执行流程方面的源码,搞明白了G ...
- 单点登录(SSO)问题
单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.
- PHP语言基础之MySql 05 By ACReaper
PHP的基本语法学完后,我们马上学下PHP如何和MySql进行交互.PHP和MySql进行交互的API可以分为两类,一类是面向过程的,一类是面向对象的,面向对象的我们等复习完面向对象再介绍,现在先介绍 ...
- 我所遭遇过的游戏中间件--Havok
我所遭遇过的游戏中间件--Havok Havok是我接触的第一款游戏中间件,那是在五,六年前,我刚刚毕业,对游戏开发还是个菜鸟.我记得先是对游戏场景中的地形和其他静态物体生成刚体,然后做角色的Ragd ...
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js？
在我写这篇文章的时候,我们刚刚从我们的应用程序代码库中删除了最后一行AngularJS代码,结束了一个为期4个月的非侵入性工作,将我们的应用程序从AngularJS迁移到VueJS.在这篇文章中,我将 ...
- crtmpserver实现防盗流和流推送验证
Protecting your streams from webpage copy&paste flash code, listing or recording 保护流,防止在页面上被复制&a ...
- Android数字选择器-NumberPicker
数字选择器NumberPicker是Android3.0之后引入的一个控件,比较常用,比如说手机常用的闹钟,可以选择小时和分钟,如果你需要兼容3.0之前版本,GitHub上有开源的项目,具体的下载地址 ...
- JDBC上关于数据库中多表操作一对多关系和多对多关系的实现方法
黑马程序员 我们知道,在设计一个Javabean的时候,要把这些BEAN 的数据存放在数据库中的表结构,然而这些数据库中的表直接又有些特殊的关系,例如员工与部门直接有一对多的关系,学生与老师直接又多对 ...
- iframe跨域与session失效问题
何为跨域跨域session/cookie? 也就是第三方session/cookie.第一方session/cookie指的是访客当前访问的网站给访客的浏览器设置的seesion /cookie, 会 ...