关闭

jquery ajax pt1

707人阅读 评论(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


















0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JQuery中Ajax的操作

Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现;而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大...
  • liujiahan629629
  • liujiahan629629
  • 2014-03-27 00:12
  • 195833

JQuery AJAX基本使用

JQuery AJAX基本使用ajax的get和post方式$.post() 以post请求方式发送ajaxpost方式格式jQuery.post(url, [data], [callback], [type])参数1:url,请求路径 参数2:data,请求参数 参数3:callback,回调...
  • q547550831
  • q547550831
  • 2016-10-23 22:00
  • 1434

[jQuery]$.ajax()方法详解及实例

$.ajax()方法详解及实例  1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。 3...
  • u012843873
  • u012843873
  • 2016-09-21 17:33
  • 12033

jquery之重写(扩展)$.ajax和$.fn.load等方法详解

前言:         今天做东西,考虑用户最好的体验,要实现界面上异步请求数据的loading效果,功能代码都是别人写完的,大概几十个地方,用的都是jQuery的load方法。咋整啊,总不能挨个去每个方法里面加效果吧,几十个地方呢。思来想去,只能用重写了,...
  • qq_16313365
  • qq_16313365
  • 2016-04-06 22:37
  • 8291

Jquery源码分析---Ajax分析

Jquery源码分析---Ajax分析 7.1 jquery的ajax常用方法 对于Ajax原理不深入分析。Jquery肯定也 会提供Ajax的实现。对于ajax的请求,可以分成如下的几步: 1、通过 new XMLHttpRequest 或其它的形式(指IE)生成ajax的对象xhr。 2...
  • lhf2009913
  • lhf2009913
  • 2014-06-18 09:22
  • 604

jQuery中使用Ajax与后台交互实例

一、$.ajax的一般格式 $.ajax({      type: 'POST',      url: url ,     dat...
  • u010589037
  • u010589037
  • 2014-06-13 20:14
  • 7689

JQuery中ajax的简单使用教程(附带实例代码)

当接触一项新技术时,首先我们要问自己四个问题,如果这四个问题我们都能学习并理解到位,那么可以说这个新技术你已经完成了初步掌握,下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中ajax的使用教程,相信你对ajax已经有了一个基础了解。那么可以直接看第四部分,以便节约您的时间。 ...
  • v_111
  • v_111
  • 2017-05-02 13:59
  • 4699

jQuery中的Ajax(全)

小结   1,基础:从load讲起,依次有get、post、getJSON、getScript、ajax   2,增强:jsonp、全局函数、jqXHR   3,高级:缓存相应,截流、数据类型转换、预过滤器、替代传输机制。   4,工具函数:serialize、serializeArray、$.pa...
  • Real_Bird
  • Real_Bird
  • 2016-10-07 11:19
  • 1784

jquery扩展原生ajax,减少逻辑,jquery插件

为什么这么做前提加入基于这样的一个现实,我们后台返回给我们的数据中都有一个json数据,数据中包含data,success,message等字段,success表示是否后台有操作的异常。通用处理,减少处理的逻辑基于这个样子,如果我们处理的时候,能够把error,或者返回数据后,后台异常等自动的进行处...
  • u012881904
  • u012881904
  • 2017-03-02 20:57
  • 948

jquery+ajax简单的例子

ajax test jQuery(function($){ $('button').click(function(){ var name = $(this).attr('name'); $.ajax({ url:"hello.php...
  • xluren
  • xluren
  • 2013-11-29 10:46
  • 7873
    个人资料
    • 访问:836483次
    • 积分:13052
    • 等级:
    • 排名:第1204名
    • 原创:420篇
    • 转载:267篇
    • 译文:0篇
    • 评论:40条
    文章分类
    最新评论