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大大简化了我们的操作,不用考虑浏览器的诧异了. ...
随机推荐
- TR069协议小结
也称为CWMP,是在Internet网上通过wan口控制通信终端设备的协议.其协议流程如下图所示: 具体网上有很多资料.其主要的两个内容是:HTTP Client模型.DATA模型. ...
- 给定任意字符串，计算一共能组合成多少个单词bing
CSDN编程挑战里的题目 例如有一个字符串"iinbinbing",截取不同位置的字符‘b’.‘i’.‘n’.‘g’组合成单词"bing".若从1开始计数的话, ...
- HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 【转】
HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关. 阅读 58013 次, 今日 ...
- Longest Substring Without Repeating Characters leetcode java
题目: Given a string, find the length of the longest substring without repeating characters. For examp ...
- java 解析 XML实例
package com.hseact.fecp.servlet; import java.io.IOException; import javax.xml.parsers.DocumentBuilde ...
- linux程序调试命令addr2line之入门简单介绍(本文先不聊gdb调试)
addr2line有什么作用呢? 可别小瞧它, 它能够定位到代码出错的位置. 以下, 我们来看看这个简单的代码: #include <stdio.h> int main() { int * ...
- 2. Using 'dp' instead of 'px' to set text size
android:textSize="45px" ==> android:textSize="45dp" 因为Android Phone的手机分辨率各不相 ...
- C#(wpf)迷你词典
本周利用空余时间做的一个单词查询软件(C#(Wpf)-WebService),目前只支持中英文查词,同义词.例句.发音. 未激活状态 WebService:http://fy.webxml.com.c ...
- 能说明你的Javascript技术很烂的五个原因
Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态.如此被广泛使用.如此根植于我们的生活中的另外一种语言.它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西 ...
- 高可用性(HA) 4 - network bonding
我们都知道,hadoop namenode是一个臭名昭著的单点故障点(SPOF). 当你找到一篇High Availability的文章, 以为使用heartbeat/pacemaker, coro ...