Jquery+ajax+json+servlet原理和Demo

最新推荐文章于 2024-02-27 20:57:18 发布

莫川

最新推荐文章于 2024-02-27 20:57:18 发布

阅读量1.5w

点赞数 8

分类专栏：【JavaScript】【java】

本文链接：https://blog.csdn.net/nupt123456789/article/details/10842215

版权

【java】同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

【JavaScript】

7 篇文章 0 订阅

订阅专栏

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="提交" οnclick="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

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

莫川

关注

8
点赞
踩
20

收藏

觉得还不错? 一键收藏
6
评论
Jquery+ajax+json+servlet原理和Demo

Jquery+ajax+json+servlet原理和Demo大致过程：用户时间点击，触发js，设置$.ajax，开始请求。服务器响应，获取ajax传递的值，然后处理。以JSON格式返回给ajax。ajax在sucess对应的函数中将返回的json数据进行解析，然后输出到jsp页面。1.前台index.jsp java" import="java.util.*" p
复制链接

扫一扫