jquery ajax pt1

最新推荐文章于 2020-07-01 23:47:42 发布

a771948524

最新推荐文章于 2020-07-01 23:47:42 发布

阅读量935

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/zxlstudio/article/details/17162933

版权

Ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文件结构：

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/basic.js"></script>
<link rel="stylesheet" type="text/css" href=" <%=request.getContextPath()%>/css/style.css"/>

</head>
<body>
<p class="large">How to make ajax calls using jsp & jquery</p>
	<form id="updateUsername">
		<label for="username">what is your name?</label>
		<input type="text" id="username" name="username" />
		<input type="submit" />
	</form>
	<p id="displayName" />
	<hr />
	<p class="small" >zxl</p>
</body>
</html>

base.js

$(document).ready(function(){
	
	$('#updateUsername').submit(function(){
		$.ajax({
			url: 'update',
			type: 'POST',
			dataType: 'json',
			data: $('#updateUsername').serialize(),
			success: function(data){
				if(data.isValid){
					$('#displayName').html('you name is: '+data.username);
					$('#displayName').slideDown(500);
				}else{
					$('#displayName').slideUp(500);
					alert('please enter !');
				}
			}
		});
		return false;
	});
	
});

style.css

@CHARSET "UTF-8";

body{
	margin: 0px auto;
    width: 500px;
    background-color: #EEEEEE;
}
p.large{
	color: red;
	font-size: 20px;
}
p.small{
	font-size: 15px;
}
#displayName{
	display: none;
}

update.java

package com.ajax.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

/**
 * Servlet implementation class update
 */
public class update extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public update() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		Map<String, Object> map =new HashMap<String, Object>();
		boolean isValid=false;
		String usernameString=request.getParameter("username");
		if(usernameString != null && usernameString.trim().length() != 0){
			isValid=true;
			map.put("username", usernameString);
		}
		map.put("isValid", isValid);
		write(response,map);
	}

	private void write(HttpServletResponse response, Map<String, Object> map) throws IOException {
		// TODO Auto-generated method stub
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(new Gson().toJson(map));
	}

}

Gson

a771948524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax pt1

index.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here/css/style.css"/>How to make ajax calls using jsp & jquery what is
复制链接

扫一扫