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大大简化了我们的操作,不用考虑浏览器的诧异了. ...

随机推荐

jsp中生成txt文件
import jxl.Workbook; import jxl.write.Label; import jxl.write.WritableSheet; import jxl.write.Writab ...
使用addChildViewController手动控制UIViewController的切换
addChildViewController If the new child view controller is already the child of a container view con ...
采用Operator-sdk轻松将helm chart转为Operator
去年就接触Operator,从Oracle发布的WebLogic Operator到mySQL Operator,构建的源码一大堆,但感觉一直缺少合适的开发框架能够避免复杂性快速生成, 随着技术的日益 ...
Adhoc
没觉得Adhoc还有什么做的,这几年貌似很冷了,从通信的角度讲,实现比较困难,实际意义不大,国内最近又跟风了VANET.以我同学做的为例,他考虑用Adhoc做野外分散点的自组网(一个集体内),但从通信 ...
Asp.Net Core App 部署故障示例 1
相关阅读:Windows + IIS 环境部署Asp.Net Core App 1. HTTP Error 502.5 – Process Failure 环境 Windows Server 201 ...
poj 2284 That Nice Euler Circuit 解题报告
That Nice Euler Circuit Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 1975 Accepted ...
C++代码统计工具
自己前几天写的C++代码统计工具. http://pan.baidu.com/s/17SnnH
Android中远程Service浅析
上一篇文章中简单的写了一下关于Android中Service的两种启动方式,不过都是本地的服务,今天就简单的写下关于Android中远程Service的使用,学习之前先了解两个概念,AIDL( And ...
使用jQuery在上传图片之前实现缩略图预览
使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02 ...
Inf2Cat应用的参数使用详细介绍
http://msdn.microsoft.com/zh-cn/subscriptions/ff547089 Inf2Cat Inf2Cat (Inf2Cat.exe) 是一个命令行工具,该工具确 ...

jquery ajax例子

jquery ajax例子的更多相关文章

随机推荐

热门专题