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大大简化了我们的操作,不用考虑浏览器的诧异了. ...
随机推荐
- arm指令版本
arm-linux-readelf 查看 armeabi Tag_CPU_name: "5TE" Tag_CPU_arch: v5TE armeabi-v7a Tag_CPU_na ...
- JAVA常见算法题(三十四)---计算加密之后的电话号码
某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的, 加密规则如下: 每位数字都加上5,然后用和除以10的余数代替该数字, 再将第一位和第四位交换,第二位和第三位交换. 求加密之后的 ...
- 成为Java高手的25个学习目标
本文将告诉你学习Java需要达到的25个目标,希望能够对你的学习及找工作有所帮助.对比一下自己,你已经掌握了这25条中的多少 条了呢? 1.你需要精通面向对象分析与设计(OOA/OOD).涉及模式(G ...
- spark读取 kafka nginx网站日志消息 并写入HDFS中（转）
原文链接:spark读取 kafka nginx网站日志消息 并写入HDFS中 spark 版本为1.0 kafka 版本为0.8 首先来看看kafka的架构图 详细了解请参考官方 我这边有三台机器用 ...
- JSP中解决中文乱码
<%@ page language="java" contentType="text/html;charset=gbk" pageEncoding=&qu ...
- JMS基本概念之一
The Java Message Service(JMS) API is a messaging standard that allows application components based o ...
- C++代码统计工具
自己前几天写的C++代码统计工具. http://pan.baidu.com/s/17SnnH
- std::vector利用swap()函数进行内存的释放【转】
首先,vector与deque不同,其内存占用空间只会增长,不会减小.比如你首先分配了10,000个字节,然后erase掉后面9,999个,则虽然有效元素只有一个,但是内存占用仍为10,000个.所有 ...
- CREATE DATABASE failed
由于环境需要, 故修改SQL Server 2012的默认的数据库的数据文件和日志文件的位置. 如下: 创建数据库, 遭遇报错. 错误信息: A file activation error occur ...
- [Debug] Debug Node.js Application by using Chrome Dev tools
For example you have a server.js file, and you want to debug some problems; What you can do is: node ...