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. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据代码 ...

随机推荐

130825组队赛-Regionals 2012, North America - East Central NA
A.Babs' Box Boutique 一道简单的dfs搜索题,需要两两比较,然后搜到底,得到最大值就行了.比赛时队友写的,我只负责debug..赛后自己写的.. #include<iostr ...
hive怎样处理多分隔符数据
问题描写叙述: 大数据维稳需求中,客户提供的測试数据为多个字符做分隔符('|#'),在pig中会直接报错,hive中仅仅认第一个分隔符. 因为数据量比較大(160G),在文本中替换成单个字符分 ...
javascript笔记整理（运算符）
1.运算符和操作数的组合就称为表达式. 2.算术运算符(+ - * / % a++ a-- --a ++a) a.+ 1.用于数值计算:var a=1;var b=2;alert(a+b)===3 2 ...
cocos2d-x游戏开发系列教程-坦克大战游戏之虚拟手柄的显示
上篇文章我们有了坦克,但是没有手柄,无法控制坦克. 1.这篇我们编写虚拟手柄来控制坦克.头文件大致内容如下: #define RES_PADDLE_LEFT "paddle/left.png ...
Use GraceNote SDK in iOS（二）获取音乐的完整信息
在需求彻底明朗化,外加从MusicFans转到GraceNote,再从GraceNote的GNSDK转到iOS SDK后,最终完毕了在iOS上通过音乐的部分信息获取完整信息的功能了.(好吧,我承认是相 ...
sqlserver bak还原
一.查看: restore filelistonly from disk='F:\Db\A_backup.bak' 二.还原:RESTORE DATABASE AFROM DISK = 'F:\Db\ ...
Java内部类——成员内部类
成员内部类的意思就是,一个外层类里面包含着一个非static的class,举例如下: class OuterClass { //变量,函数定义... class InnerClass { //变量,函 ...
重操JS旧业第三弹：Array
数组在任何编程语言中都是非常重要的,因为函数在最大程度上代表了要实现的功能,而数组则是这些函数所要操作的内存一部分. 1 构建数组 js与其他非脚本语言的灵活之处在于要实现一个目标它可能具有多种方式, ...
TinkPHP+WAMP
1.下载wamp 我下载的是php5.5版本:根据你自身的需要嘛 http://www.wampserver.com/ 2.下载thinkphp 我下载的版本是3.2 http://www.think ...
nodejs之防jade
你们学习nodejs的时候,千万别用jade,我掉到它的坑里,2天没有爬出来后来用vue

Jquery+ajax+json+servlet原理和Demo

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

随机推荐

热门专题