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. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...
随机推荐
- webservice asmx 无法序列化接口 System.Collections.Generic.IList
转载自:http://www.cnblogs.com/chenhuzi/p/4178194.html 今天有位同事在方法里加了一个IList<entity> 的返回值,也没有测试,直接发布 ...
- ORACLE实例恢复过程详细分析--使用dump、BBED等多种工具结合分析
---友情提示,内容较多,可以从博文左上的+目录选择小节方便阅读. 实验思路: --实验相关TRACE文件:http://download.csdn.net/detail/q947817003/6 ...
- QDockWidget嵌套布局详解-实现Visual Studio布局
概述 许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
- 类虚函数表原理实现分析（当我们将虚表地址[n]中的函数替换，那么虚函数的实现就由我们来控制了）
原理分析 当调用一个虚函数时, 编译器生成的代码会调用 虚表地址[0](param1, param2)这样的函数. 已经不是在调用函数名了. 当我们将虚表地址[n]中的函数实现改为另外的函数, 虚函数 ...
- zabbix 监控jvm
tomcat 机器配置: [root@wx03 lib]# pwd /usr/local/apache-tomcat-7.0.55/lib [root@wx03 lib]# ls -ltr *jmx* ...
- js获取手机型号和手机操作系统版本号
1.js 判断IOS版本号 先来观察 iOS 的 User-Agent 串: iPhone 4.3.2 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 l ...
- js之checkbox的代码全选/全不选，使用id获取元素，而不是name
每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...
- Linux 高性能server编程——高级I/O函数
重定向dup和dup2函数 #include <unistd.h> int dup(int file_descriptor); int dup2(int file_descriptor_o ...
- 深入探讨MFC消息循环和消息泵
首先,应该清楚MFC的消息循环(::GetMessage,::PeekMessage),消息泵(CWinThread::PumpMessage)和MFC的消息在窗口之间的路由是两件不同的事情.在MFC ...
- 基于MMSeg算法的中文分词类库
原文:基于MMSeg算法的中文分词类库 最近在实现基于lucene.net的搜索方案,涉及中文分词,找了很多,最终选择了MMSeg4j,但MMSeg4j只有Java版,在博客园上找到了*王员外*(ht ...