Jquery+ajax+json+servlet原理和Demo

大致过程：
用户时间点击，触发js，设置$.ajax，开始请求。服务器响应，获取ajax传递的值，然后处理。以JSON格式返回给ajax。ajax在sucess对应的函数中将返回的json数据进行解析，然后输出到jsp页面。

1.前台index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme() + "://"

			+ request.getServerName() + ":" + request.getServerPort()

			+ path + "/";

%>

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

<html>

	<head>

		<base href="<%=basePath%>">

		<title>Jquery Ajax Json Servlet Demo</title>

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

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

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

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

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

		<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

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

		<script type="text/javascript">

	       function jsonAjaxPost(){

	         var userNameObj=$("#username").val();

	         var contentObj=$("#content").val();

             $.ajax({

               type:"post",//请求方式

               url:"jsonAjaxAction?userName="+encodeURI(encodeURI(userNameObj))

                   +"&content="+encodeURI(encodeURI(contentObj)),//发送请求地址

               timeout:30000,//超时时间：30秒

               dataType:"json",//设置返回数据的格式

               //请求成功后的回调函数 data为json格式

               success:function(data){

                  $("#resultJsonText").text("你的名字："+data.yourName+"  你输入的内容:"+data.yourContent);

              },

              //请求出错的处理

              error:function(){

                        alert("请求出错");

              }

           });

          }

	</script>

	</head>

	<body>

	<form id="form1" method="post">

		<p>

			评论：

		</p>

		<p>

			姓名：

			<input type="text" name="username" id="username" />

		</p>

		<p>

			内容：

			<textarea name="content" id="content" rows="2" cols="20"></textarea>

		</p>

		<p>

			<input type="button" id="send" value="提交" onclick="jsonAjaxPost()" />

		</p>

	</form>

	<div class="comment">

		返回数据：

		<p id="resultJsonText"></p>

	</div>

	<div id="resText">

	</div>

	</body>

</html>

2.后台Servlet

/*

 * $filename: JsonAjaxServlet.java,v $

 * $Date: Sep 1, 2013  $

 * Copyright (C) ZhengHaibo, Inc. All rights reserved.

 * This software is Made by Zhenghaibo.

 */

package com.njupt.zhb.test;

import java.io.IOException;

import java.io.PrintWriter;

import java.net.URLDecoder;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/*

 *@author: ZhengHaibo

 *web:     http://blog.csdn.net/nuptboyzhb

 *mail:    zhb931706659@126.com

 *Sep 1, 2013  Nanjing,njupt,China

 */

public class JsonAjaxServlet extends HttpServlet{

	/**

	 *

	 */

	private static final long serialVersionUID = 1L;

	@Override

	protected void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		// TODO Auto-generated method stub

		doPost(request, response);

	}

	@Override

	protected void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		// TODO Auto-generated method stub

		request.setCharacterEncoding("utf-8");

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

		userName=URLDecoder.decode(userName, "UTF-8");

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

		content=URLDecoder.decode(content, "UTF-8");

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

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

		response.setCharacterEncoding("utf-8");

		PrintWriter out = response.getWriter();

		//将数据拼接成JSON格式

		out.print("{\"yourName\":\"" + userName + "\",\"yourContent\":\""+content+"\"}");

		out.flush();

		out.close();

	}

}

3.配置文件web.xml

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

<web-app version="2.5"

	xmlns="http://java.sun.com/xml/ns/javaee"

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <welcome-file-list>

    <welcome-file>index.jsp</welcome-file>

  </welcome-file-list>

  <servlet>

		<servlet-name>jsonAjaxAction</servlet-name>

		<servlet-class>com.njupt.zhb.test.JsonAjaxServlet</servlet-class>

	</servlet>

	<servlet-mapping>

		<servlet-name>jsonAjaxAction</servlet-name>

		<url-pattern>/jsonAjaxAction</url-pattern>

	</servlet-mapping>

</web-app>

4.其他

1.需要导入jquery.min.js

2.注意乱码的解决方案：

2.1：js中对字符串进行编码，即：encodeURI(encodeURI(userNameObj))

2.2：在Servlet中需要用java.net.URLDecoder解码

5.结果演示
：

在浏览器中输入：http://localhost:8080/AjaxServletJson/

先输入，然后点击按钮：

源代码下载：http://download.csdn.net/detail/nuptboyzhb/6193851
参考资料：

1.jquery $.ajax参考手册：http://www.w3school.com.cn/jquery/ajax_ajax.asp

未经允许不得用于商业目的

Jquery+ajax+json+servlet原理和Demo的更多相关文章

练习 jquery+Ajax+Json 绑定数据分类： asp&period;net 练习 jquery+Ajax+Json 绑定数据分类： asp&period;net
练习 jquery+Ajax+Json 绑定数据
php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
基于Jquery+Ajax+Json+存储过程高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
如何构建ASP&period;NET MVC4&amp&semi;JQuery&amp&semi;AJax&amp&semi;JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
Jquery Ajax Json ashx 实现前后台数据传输
经过一个多星期的研究,各种查找资料终于自己实现了Jquery Ajax Json ashx 的前后台数据交流功能首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...
asp&period;net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
Jquery ajax json 不执行success的原因坑爹
最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2.6版本可 ...
Django1&period;6 + jQuery Ajax + JSON 实现页面局部实时刷新
最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...
jQuery +ajax +json+实现分页
正文首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据代码 ...

随机推荐

SQL Server SQL性能优化之--通过拆分SQL提高执行效率，以及性能高低背后的原因
复杂SQL拆分优化拆分SQL是性能优化一种非常有效的方法之一, 具体就是将复杂的SQL按照一定的逻辑逐步分解成简单的SQL,借助临时表,最后执行一个等价的逻辑,已达到高效执行的目的一直想写一遍通过 ...
(九)Maven坐标详解
Maven的一个核心的作用就是管理项目的依赖,引入我们所需的各种jar包等.为了能自动化的解析任何一个Java构件,Maven必须将这些Jar包或者其他资源进行唯一标识,这是管理项目的依赖的基础,也就 ...
android模拟器（genymotion）+appium+python 框架执行基本原理（目前公司自己写的）
android模拟器(genymotion)+appium+python 框架执行的基本过程: 1.Push.initDate(openid)方法 //业务数据初始化 1.1 v5db.p ...
lintcode ：Remove Duplicates from Sorted Array 删除排序数组中的重复数字
题目: 删除排序数组中的重复数字给定一个排序数组,在原数组中删除重复出现的数字,使得每个元素只出现一次,并且返回新的数组的长度. 不要使用额外的数组空间,必须在原地没有额外空间的条件下完成. 样例 ...
HDU 3757 Evacuation Plan DP
跟 UVa 1474 - Evacuation Plan 一个题,但是在杭电上能交过,在UVa上交不过……不知道哪里有问题…… 将施工队位置和避难所位置排序. dp[i][j] 代表前 i 个避难所收 ...
linux命令——磁盘管理cd
Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的. cd指令可让用户在不同的目录间切换,但该用户必须拥有足够的权限进入目的目录. 1 ...
springMVC实现增删改查
首先需要准备好一张数据库表我这里用emp这张表:具体代码: /* SQLyog 企业版 - MySQL GUI v8.14 MySQL - 5.1.73-community ************* ...
c&num; ？？和？
static void Main(string[] args) { double? num1 = null; // ? 说明num1可以为空 ...
maven项目自动创建src/main/resources等四个资源文件夹
如何使maven项目自动创建这四个文件夹:src/main/resources.src/main/java.src/test/java.src/test/resources 网传甚广的在Config ...
git merge 步骤
这两天用git比较多,自己学习的过程踩了不少误区,特意记录下来. 当多人合作开发使用git作为代码管理仓库时,要注意自己的更新不能冲掉别人的更新,因为自己一开始不了解的时候就出现了这种情况.首先一定要 ...