博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery+ajax+json+servlet原理和Demo
阅读量:7030 次
发布时间:2019-06-28

本文共 2765 字,大约阅读时间需要 9 分钟。

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 + "/";%>					Jquery Ajax Json Servlet Demo		

评论:

姓名:

内容:

返回数据:

 

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

 

index.jsp
jsonAjaxAction
com.njupt.zhb.test.JsonAjaxServlet
jsonAjaxAction
/jsonAjaxAction

 

4.其他

1.需要导入jquery.min.js
2.注意乱码的解决方案:
 2.1:js中对字符串进行编码,即:encodeURI(encodeURI(userNameObj))
 2.2:在Servlet中需要用java.net.URLDecoder解码
5.结果演示
在浏览器中输入:http://localhost:8080/AjaxServletJson/
先输入,然后点击按钮:

源代码下载:

参考资料

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

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

 

你可能感兴趣的文章
了解一下ES6: 解构赋值&字符串
查看>>
7 - 在 Django Admin 后台发布文章
查看>>
SpringBoot+Mybatis+ Druid+PageHelper 实现多数据源并分页
查看>>
Umeng第三方登录
查看>>
EggBorn.js:一款顶级Javascript全栈开发框架
查看>>
前端开始的那件事——表单
查看>>
【前端】HTML属性
查看>>
js 算法3
查看>>
【Java 容器面试题】谈谈你对HashMap 的理解
查看>>
分组圆角TableView
查看>>
高级Java研发者在解决大数据问题上的一些技巧
查看>>
用 Node 开发一个命令行版本词典--不到十行的代码
查看>>
支持多解码模块的安卓视频播放器AndroidVideoplayer
查看>>
TCP协议详解
查看>>
Node.js process 模块解读
查看>>
Lodash源码分析-compact.js
查看>>
度小满牵手南京银行打造”AI鑫”计划:银行零售业掀起变革运动
查看>>
微信小程序之分享海报生成
查看>>
敏捷AI|NLP技术在宜信业务中的实践「背景篇」
查看>>
布局结束检测工具
查看>>