引入JSON的jar包:

注意，如果包不全，页面请求servlet时，jquery ajax会返回error：function

弹出error occured!!!

HTML Code:

 <%@ page language="java" pageEncoding="utf-8"%>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

 <head>

 <title>jquery ajax</title>

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="">

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script>

 <script language="javascript">

     $(function(){

         $('.sumbit').click(function(){

             var v = $('#account').val();

             alert(v);

             if($('#account').val().length==){

                 $('.hint').text("用户名不能位空").css({"background-color":"green"});

             }else{

                 $.ajax({

                         type:'get',

                     url:'jqueryAjax',

                     data:{account:$('#account').val()},

                     dataType:'json', //很重要!!!.预期服务器返回的数据类型 ,

                     success:function(data){

                         $.each(data.jsonArray,function(index){

                             $.each(data.jsonArray[index],function(key,value){

                                 alert(key+":"+value)

                             });

                         });     

                         $('body').append("<div>"+data.account+"</div>").css("color","red");

                     },

                     error:function(){

                         alert("error occured!!!");

                     }     

                 });

             }

         });

     });

 </script>

 </head>    

 <body>

 <h3 align="center">jquery AjaX</h3>

 <hr>

 <label>请输入你的账户 ：</label>

 <input id="account" name="account" type="text">

 <input class="sumbit" type="button" value="检测">

 <div class="hint"></div>

 </body>

 </html>

dataType:'json', //很重要!!!.预期服务器返回的数据类型 ,这句代码注释掉,也正常运行!

不知是否是servlet中写了这句代码的原因:

response.setContentType("application/x-json");(网上找下原因)

servlet Code：JqueryAjaxServlet.java

 import java.io.IOException;

 import java.io.PrintWriter;  

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;  

 import net.sf.json.JSONArray;

 import net.sf.json.JSONObject;  

 /**

  * Author: YangT

  * Version: 1.0

  * Create: 2013-3-13 上午10:34:58

  */

 public class JqueryAjaxServlet extends HttpServlet {  

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         System.out.println("JqueryAjaxServlet :  begin");  

 //      response.setContentType("text/html;charset=utf-8");

         String account = request.getParameter("account");

         System.out.println("account :" + account);  

         JSONObject json = new JSONObject();

         JSONArray jsonArray = new JSONArray();  

         JSONObject member = null;

         for (int i = ; i < ; i++) {

             member = new JSONObject();

             member.put("name", "yangting" + i);

             member.put("age",  + i);

             jsonArray.add(member);

         }

         json.put("jsonArray", jsonArray);

         json.put("account", account);  

         //错误：response.setContentType("text/html;charset=utf-8");

                 response.setContentType("application/x-json");

         PrintWriter pw = response.getWriter();

         pw.print(json.toString());  

         System.out.println("json array :" + jsonArray.toString());

         System.out.println("json object :" + json.toString());

         System.out.println("JqueryAjaxServlet : end");  

         pw.close();  

     }  

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws IOException, ServletException {

         this.doGet(request, response);

     }   

 }

web.xml

 <?xml version="1.0" encoding="UTF-8"?>

 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">  

     <servlet>

         <servlet-name>JqueryAjaxServlet</servlet-name>

         <servlet-class>JqueryAjaxServlet</servlet-class>

     </servlet>

     <servlet-mapping>

         <servlet-name>JqueryAjaxServlet</servlet-name>

         <url-pattern>/jqueryAjax</url-pattern>

     </servlet-mapping>  

 </web-app>

java servlet+jquery+json学习小例子的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. java操作xml的一个小例子

    最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要 ...

  3. java连接mysql的一个小例子

    想要用java 连接数据库,需要在classpath中加上jdbc的jar包路径 在eclipse中,Project的properties里面的java build path里面添加引用 连接成功的一 ...

  4. Java Servlet生成JSON格式数据并用jQuery显示

    1.Servlet通过json-lib生成JSON格式的数据 import java.io.IOException;import java.io.PrintWriter;import java.uti ...

  5. Django1.7+JQuery+Ajax集成小例子

    Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...

  6. js中的json的小例子

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. java入门---简介&简单输出小例子&开发前准备

        Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式推出.J ...

  8. java任务调度quartz框架的小例子

    quartz是一个开源的作业调度框架,当然,java可以使用Timer来实现简单任务调度的功能,但Timer是单线程的设计方案,使得一个任务延迟会影响到其他的任务.java也可以使用Scheduled ...

  9. 收藏的js学习小例子

    1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...

随机推荐

  1. C语言--对数组地址的解析

    在C编程中,我们进程会用到数组,这看起来很简单,因为,数组就是存储相同类型元素的集合嘛,不过,当你还没考虑到数组的地址问题时,一切都是简单的,如果你接触了数组中的地址概念,也许你会改变你的想法. 下面 ...

  2. Android 之 资源文件的介绍及使用

    Android 之 资源文件的介绍及使用 1.资源的简单介绍:  在res文件夹中定义:字符串.颜色.数组.菜单.图片.视频等:在应用程序中使用这些资源.  2.使用资源的长处:降低代码量,同一时候为 ...

  3. 学习 Netty 3.x

    study link: http://netty.io/3.6/guide/#architecture 应用场景: Chat server that requires persistent conne ...

  4. 用C/C++扩展你的PHP(转)

    简 介 英文版下载: PHP 5 Power Programming PHP取得成功的一个主要原因之一是她拥有大量的可用扩展.web开发者无论有何种需求,这种需求最有可能在PHP发行包里找到.PHP发 ...

  5. 减少iOS应用程序安装包大小

    安装包优化大小方法: <资源优化> 1.去除无用资源 通过几次项目的升级后,项目中会出现一些没有用到的图片.这些图片在我们导入到项目中后,之后项目升级过程后并没有再次用到. 那这些图片我们 ...

  6. 解决蛋疼的阿里云单CPU使用率的问题。

    工作中涉及到阿里云的应用.在性能测试阶段,压测过程中只要一个CPU未使用满,第二个CPU以至于第三个和第四个CPU完全用不到. 后来和阿里云的同事沟通他们现在用的是单队列的网卡,只能靠RPS/RFS这 ...

  7. OD: First Step

    开始学习 0Day 了,前进了小小一步:<0Day 安全:软件漏洞分析艺术>第一篇末尾的 crack_me 实验成功了. 纪念一下. 几个概念: PE:    Portable Execu ...

  8. 如何学习javascript?(转)

    推荐几本好书: Step 1: <JavaScript DOM编程艺术> 看这本书之前,请先确认您对Javascript有个基本的了解,应该知道if else之类的语法,如果不懂,先去看看 ...

  9. [c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息

    上一篇已经把所有消息封装且都各自有方法处理了,这篇从使用第一步——关注开始,  关注之后进行消息记录,同时回复文本消息给用户,关注方法:DoSub,另外新用户扫描带参数的二维码关注方法:DoCodeN ...

  10. angularjs使用ng-messages-include实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...