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.net 练习 jquery+Ajax+Json 绑定数据分类： asp.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.NET MVC4&JQuery&AJax&JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
Jquery Ajax Json ashx 实现前后台数据传输
经过一个多星期的研究,各种查找资料终于自己实现了Jquery Ajax Json ashx 的前后台数据交流功能首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...
asp.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.6 + jQuery Ajax + JSON 实现页面局部实时刷新
最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...
jQuery +ajax +json+实现分页
正文首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据代码 ...

随机推荐

jquery $.post
jQuery.post() jQuery.post( url [, data ] [, success ] [, dataType ] )Returns:jqXHR Description: Load ...
hdu1151Air Raid
Air Raid Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
Vim的常用命令笔记
[简介] Vim是vi编辑器的改进版.vi是类UNIX系统里最常用的编辑器. [模式] 在shell中直接打vim filename就会进入普通模式.按i键进入编辑模式,此时Vim底部显示INSERT ...
POJ - 1185 炮兵阵地 (状态压缩)
题目大意:中文题目就不多说大意了解题思路: 1.每行最多仅仅有十个位置,且不是山地就是平原,那么就能够用1表示山地,0表示平原,将每一行的状态进行压缩了 2.接着找出每行能放炮兵的状态.先不考虑其它 ...
Swift - 判端网络连接状态，连接类型（3G还是Wifi）
IJReachability是一个使用Swift写的第三方网络检测类.可以测试网络是否连接,并支持3G和Wifi的检测. 使用样例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
jquery 获取 TABLE单元格的值
1.JQ部分: var tds = $("#table1 td"); tds.click(function(){ //给所有td添加点击事件 var tdSeq = ...
asp.net2.0安全性(1)－－用户角色篇(代码实现1)--转载来自车老师
创建用户: MembershipCreateStatus mc; Membership.CreateUser(txtUid.Text, txtPwd.Text, txtEmail.Text, txtQ ...
sql: update from
sql server提供了update的from 子句,可以将要更新的表与其它的数据源连接起来.虽然只能对一个表进行更新,但是通过将要更新的表与其它的数据源连接起来,就可以在update的表达式中引 ...
Eclipse用法和技巧十三：自动生成的TODO注释1
使用eclipse的快捷键自动生成的代码,经常有这样的注释. 一眼看上去这个注释和一般的注释并无什么差别,不过TODO这个字符串的颜色不一样,应该有些内容.TODO是eclipse中提供的一种任务标签 ...
timesetevent与timekillevent的用法
unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs ...

Jquery+ajax+json+servlet原理和Demo

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

随机推荐

热门专题