引入JSON的jar包:

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

弹出error occured!!!

HTML Code:

  1.  <%@ page language="java" pageEncoding="utf-8"%>
  2.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.  <html>
  4.  <head>
  5.  <title>jquery ajax</title>
  6.  <meta http-equiv="pragma" content="no-cache">
  7.  <meta http-equiv="cache-control" content="no-cache">
  8.  <meta http-equiv="expires" content="">
  9.  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  10.  <meta http-equiv="description" content="This is my page">
  11.  <script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
  12.  <script language="javascript">
  13.      $(function(){
  14.          $('.sumbit').click(function(){
  15.              var v = $('#account').val();
  16.              alert(v);
  17.              if($('#account').val().length==){
  18.                  $('.hint').text("用户名不能位空").css({"background-color":"green"});
  19.              }else{
  20.                  $.ajax({
  21.                          type:'get',
  22.                      url:'jqueryAjax',
  23.                      data:{account:$('#account').val()},
  24.                      dataType:'json', //很重要!!!.预期服务器返回的数据类型 ,
  25.                      success:function(data){
  26.                          $.each(data.jsonArray,function(index){
  27.                              $.each(data.jsonArray[index],function(key,value){
  28.                                  alert(key+":"+value)
  29.                              });
  30.                          });     
  31.  
  32.                          $('body').append("<div>"+data.account+"</div>").css("color","red");
  33.                      },
  34.                      error:function(){
  35.                          alert("error occured!!!");
  36.                      }     
  37.  
  38.                  });
  39.              }
  40.          });
  41.      });
  42.  </script>
  43.  </head>    
  44.  
  45.  <body>
  46.  <h3 align="center">jquery AjaX</h3>
  47.  <hr>
  48.  <label>请输入你的账户 ：</label>
  49.  <input id="account" name="account" type="text">
  50.  <input class="sumbit" type="button" value="检测">
  51.  <div class="hint"></div>
  52.  </body>
  53.  </html>

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

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

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

servlet Code：JqueryAjaxServlet.java

  1.  import java.io.IOException;
  2.  import java.io.PrintWriter;  
  3.  
  4.  import javax.servlet.ServletException;
  5.  import javax.servlet.http.HttpServlet;
  6.  import javax.servlet.http.HttpServletRequest;
  7.  import javax.servlet.http.HttpServletResponse;  
  8.  
  9.  import net.sf.json.JSONArray;
  10.  import net.sf.json.JSONObject;  
  11.  
  12.  /**
  13.   * Author: YangT
  14.   * Version: 1.0
  15.   * Create: 2013-3-13 上午10:34:58
  16.   */
  17.  public class JqueryAjaxServlet extends HttpServlet {  
  18.  
  19.      public void doGet(HttpServletRequest request, HttpServletResponse response)
  20.              throws ServletException, IOException {
  21.          System.out.println("JqueryAjaxServlet :  begin");  
  22.  
  23.  //      response.setContentType("text/html;charset=utf-8");
  24.          String account = request.getParameter("account");
  25.          System.out.println("account :" + account);  
  26.  
  27.          JSONObject json = new JSONObject();
  28.          JSONArray jsonArray = new JSONArray();  
  29.  
  30.          JSONObject member = null;
  31.          for (int i = ; i < ; i++) {
  32.              member = new JSONObject();
  33.              member.put("name", "yangting" + i);
  34.              member.put("age",  + i);
  35.              jsonArray.add(member);
  36.          }
  37.          json.put("jsonArray", jsonArray);
  38.          json.put("account", account);  
  39.  
  40.          //错误：response.setContentType("text/html;charset=utf-8");
  41.                  response.setContentType("application/x-json");
  42.          PrintWriter pw = response.getWriter();
  43.          pw.print(json.toString());  
  44.  
  45.          System.out.println("json array :" + jsonArray.toString());
  46.          System.out.println("json object :" + json.toString());
  47.          System.out.println("JqueryAjaxServlet : end");  
  48.  
  49.          pw.close();  
  50.  
  51.      }  
  52.  
  53.      public void doPost(HttpServletRequest request, HttpServletResponse response)
  54.              throws IOException, ServletException {
  55.          this.doGet(request, response);
  56.      }   
  57.  
  58.  }

web.xml

  1.  <?xml version="1.0" encoding="UTF-8"?>
  2.  <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">  
  3.  
  4.      <servlet>
  5.          <servlet-name>JqueryAjaxServlet</servlet-name>
  6.          <servlet-class>JqueryAjaxServlet</servlet-class>
  7.      </servlet>
  8.      <servlet-mapping>
  9.          <servlet-name>JqueryAjaxServlet</servlet-name>
  10.          <url-pattern>/jqueryAjax</url-pattern>
  11.      </servlet-mapping>  
  12.  
  13.  </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. [深入React] 2.综述

    在开始本教程前,请先查看官方示例:https://github.com/facebook/react/archive/master.zip 里的 examples 目录. 学习react是一个循序渐进 ...

  2. SMO启发式选择

    %% % svm 简单算法设计 --启发式选择 %% clc clear close all % step=0.05;error=1.2; % [data, label]=generate_sampl ...

  3. [RxJS] Refactoring CombineLatest to WithLatestFrom

    This lesson shows why it’s preferable to using withLatestFrom instead of combineLatest in certain sc ...

  4. CCSpawn使用CCRepeatForever无效

    在使用CCSpawn中加入CCRepeatForever,但却无法使用CCRepeatForever的效果. CCActionInterval* action =(CCActionInterval*) ...

  5. 福昕阅读器drm加密解密总结

    drm是数字版权保护的一种方式,前一段时间在做四川文轩数字图书馆项目的时候用到了相关的知识,感觉这东西对于一些在线阅读和视频播放还是有很大用处的. 对于其工作原理我也很好奇,先摘抄度娘的内容如下,当然 ...

  6. TreeGrid( 树形表格)

    本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于DataGrid(数据表格)组件 一． 加载方式//建立一个 JSON 文件[{"id" ...

  7. Ruby与sass 与compass安装

     Ruby安装 windows平台下使用Rubyinstaller安装 1) 下载Rubyinstaller 2) 安装Rubyinstaller 记得勾选 add ruby executables ...

  8. jQuery操作元素

    通常,我们在创建元素时,会使用以下代码: var p = document.createElement("p"); p.innerText = "this is para ...

  9. grunt之入门实践

    grunt 是基于nodejs的前端项目管理工具,凭借着大量优秀的插件从众多前端项目管理工具中脱颖而出. 确保先安装了nodejs 为了方便使用Grunt,应该在全局范围内安装Grunt的命令行接口( ...

  10. MySQL学习笔记(1) - cmd登陆和退出

    1. 打开cmd,输入,回车 mysql -uroot -p -P3306 -h127. 1)-u :指定用户名,root为超级权限用户. 2)-p :输入密码,不指定时回车后会提示输入密码,并用*号 ...