jQuery学习总结（三）
这篇文章讲的是jQuery里的ajax发送data的三种方式，利用ajax发送数据的好处是把数据发送到了servlet后，当前页面不进行跳转。
jQuery的里的ajax发送data的方式主要有三种，分别是json数组，url拼接和表单的序列化serialize，这里要配合servlet一起。
第一种：url拼接（下面内容顺序：jsp代码，servlet代码，实验图片）
jsp代码，命名：”a.jsp”。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var myClick=function(){
var mySuccess=function(result){
alert(result);
}
var myError=function(XMLHttpRequest,textstatus){
if(XMLHttpRequest.status==404){
alert("找不到页面404错误");
}
else if(XMLHttpRequest.status==500){
alert("服务器异常500错误");
}else{
alert("服务器出现异常，请稍后重试");
}
}
$.ajax({
//把数据发到哪里去
url:'A?content='+$("#content").val(),
//要调用servlet里的方法（doget或dopost）
type:'GET',
//返回的数据类型（可以没有）
dataType:'text',
//成功的话，调用函数
success:mySuccess,
//失败调用函数
error:myError,
//如果相应时间超过三秒就会出错
timeout:3000 });
}
$("#abc").click(myClick); }); </script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text" value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>
servlet代码，取名：A.java
package web; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/A")
public class A extends HttpServlet {
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String content = request.getParameter("content");
System.out.println(content);
PrintWriter out =response.getWriter();
//下面注释了的代码是让servlet停三秒在做出反应
/** try {
Thread.sleep(3000);
} catch (InterruptedException e) {
System.out.println("代码出错"+e.getMessage());
}*/
out.println(content); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
效果图
第二方式：json
jsp代码（servlet代码可以用上面的），取名b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var myClick=function(){
var myData={ content : $("#content").val() }
var mySuccess=function(result){
alert(result);
}
var myError=function(XMLHttpRequest,textstatus){
if(XMLHttpRequest.status==404){
alert("找不到页面404错误");
}
else if(XMLHttpRequest.status==500){
alert("服务器异常500错误");
}else{
alert("服务器出现异常，请稍后重试");
}
}
$.ajax({
//把数据发到哪里去
url:'A',
//要调用servlet里的方法（doget或dopost）
type:'GET',
//数据
data:myData,
//返回的数据类型（可以没有）
dataType:'text',
//成功的话，调用函数
success:mySuccess,
//失败调用函数
error:myError,
//如果相应时间超过三秒就会出错
timeout:3000 });
}
$("#abc").click(myClick); }); </script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text" value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>
效果图
第三种：serialize序列化
jsp代码（servlet用上面的），取名：c.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
var myClick=function(){
var myData=$("#content").serialize();
var mySuccess=function(result){
alert(result);
}
var myError=function(XMLHttpRequest,textstatus){
if(XMLHttpRequest.status==404){
alert("找不到页面404错误");
}
else if(XMLHttpRequest.status==500){
alert("服务器异常500错误");
}else{
alert("服务器出现异常，请稍后重试");
}
}
$.ajax({
//把数据发到哪里去
url:'A',
//要调用servlet里的方法（doget或dopost）
type:'GET',
//数据
data:myData,
//返回的数据类型（可以没有）
dataType:'text',
//成功的话，调用函数
success:mySuccess,
//失败调用函数
error:myError,
//如果相应时间超过三秒就会出错
timeout:3000 });
}
$("#abc").click(myClick); }); </script>
<title>Insert title here</title>
</head>
<body>
<input id="content" type="text" value="This is content">
<input id="abc" type="button" value="click">
</body>
</html>
效果图
第一部分： http://www.cnblogs.com/memory9770/p/7236407.html
第二部分： http://www.cnblogs.com/memory9770/p/7237447.html
第三部分： http://www.cnblogs.com/memory9770/p/7237448.html
jQuery学习总结（三）的更多相关文章
- jquery学习笔记(三)：事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
- Jquery学习（三）选择
1.Jquery最重要的是选择. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最经常使用的,最经常使用的一般也是 ...
- [jQuery学习系列三 ]3-JQuery学习二-字典操作
前言:如果看过了第一篇和第二篇, 相信大家会对jQuery有个初步的认识了, 对于jQuery的选择器和数组的操作都已经很熟悉了, 这一篇就单独罗列jQuery中字典的操作相关的内容. 1. 数组中添 ...
- jQuery学习（三）
jQuery文档操作方法 1.内部追加内容 选择器追加到内容 append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容,其中content可以 ...
- jQuery学习笔记三
使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习-事件之绑定事件（三）
在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
随机推荐
- python3中lambda函数
def make_repeater(n): return lambda s:s*n twice=make_repeater(2) print(twice('wwss')) print(twice(2) ...
- linux下安装MariaDB数据库
搜素某个文件:find / -name '文件名(或文件夹名)' 1.编辑yum源:vi /etc/yum.repos.d/MariaDB.repo 2.编辑文件时用到的vi命令: vi 打开一个不存 ...
- 洛谷p1119--灾难后重建（Floyd不仅仅是板子）
问题描述 询问次数 5 000 00, 顶点数 200 怎么办? dijkstra?对不起,超时了/. 时间限制是1秒,询问5 000 00 ,每次dijsktra要跑n*n*logm 次,稳 ...
- net core天马行空系列：SummerBoot，将SpringBoot的先进理念与C#的简洁优雅合二为一
系列目录 1.net core天马行空系列:原生DI+AOP实现spring boot注解式编程 2.net core天马行空系列: 泛型仓储和声明式事物实现最优雅的crud操作 3.net core ...
- 洛谷$P4768\ [NOI2018]$归程 $kruscal$重构树
正解:$kruscal$重构树 解题报告: 传送门$QwQ$ 语文不好选手没有人权$TT$连题目都看不懂真的要哭了$kk$ 所以先放个题目大意?就说给定一个$n$个点,$m$条边的图,每条边有长度和海 ...
- Java程序运行原理
概念介绍: C语言
英国天文学家爱丁顿很喜欢骑车.据说他为了炫耀自己的骑车功力,还定义了一个"爱丁顿数" E ,即满足有 E 天骑车超过 E 英里的最大整数 E.据说爱丁顿自己的 E 等于87. 现给 ...
- win设置C、D、E等盘符图标为自定义的图片
1.选择一张jpg图片,在下面网站工具上,转为ico的图片(最好转64x64的清晰些). http://www.faviconico.org/favicon 2.在D盘下新建文本文件.txt,写入以下 ...
- 10.Python中print函数中中逗号和加号的区别
先看看print中逗号和加号分别打印出来的效果.. 这里以Python3为例 1 print("hello" + "world") helloworld 1 p ...
- P2871 [USACO07DEC]手链Charm Bracelet（01背包模板）
题目传送门:P2871 [USACO07DEC]手链Charm Bracelet 题目描述 Bessie has gone to the mall's jewelry store and spies ...