这篇文章讲的是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学习总结(三)的更多相关文章

  1. jquery学习笔记(三):事件和应用

    内容来自[汇智网]jquery学习课程 3.1 页面加载事件 在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...

  2. Jquery学习(三)选择

    1.Jquery最重要的是选择. 学习要点:        1.简单选择器        2.进阶选择器        3.高级选择器 ①简单选择器. 最简单的也就是最经常使用的,最经常使用的一般也是 ...

  3. [jQuery学习系列三 ]3-JQuery学习二-字典操作

    前言:如果看过了第一篇和第二篇, 相信大家会对jQuery有个初步的认识了, 对于jQuery的选择器和数组的操作都已经很熟悉了, 这一篇就单独罗列jQuery中字典的操作相关的内容. 1. 数组中添 ...

  4. jQuery学习(三)

    jQuery文档操作方法 1.内部追加内容 选择器追加到内容 append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容,其中content可以 ...

  5. jQuery学习笔记三

    使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...

  6. 初步学习jquery学习笔记(三)

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  7. jQuery学习-事件之绑定事件(三)

    在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  10. jQuery学习笔记(一):入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

随机推荐

  1. nixyx —— 一个小巧的项目工程/编译文件生成器(构建系统?)

    恩..nixyx确实算不上是一个构建系统. 所谓构建系统,比如GNU的Autotools,那是一套很完整的构建体系,包括了程序的配置,编译和安装三大部分. 类似的软件还有:google的gyp.腾讯的 ...

  2. 在windows+nginx的curl操作请求超时的问题

    之前的项目在apache下进行本地curl操作的时候请求不会超时 后来要在nginx下开发的时候,我在项目中写一个curl操作的test.php文件,请求相同项目下的一个index.php文件,然后c ...

  3. jquery中动态添加的标签绑定的click事件失效的解决办法

    把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...

  4. 数据导出至excle

    ASP.NET MVC导出Excel 首先下载  NPOI.dll 引用到项目中 建议下载地址:http://download.csdn.net/detail/pukuimin1226/5851747 ...

  5. k8s集群---apiserver,controller-manager,scheduler部署

    #证书自签名脚本 root@k8s-master: ~/k8s/k8s-cert :: $ cat k8s-cert.sh cat > ca-config.json <<EOF { ...

  6. 从零开始のcocos2dx生活(八)ParticleSystemQuad

    https://learnopengl-cn.github.io/01%20Getting%20started/04%20Hello%20Triangle/#_1 写的真的非常好-最近没时间拜读,只看 ...

  7. IDEA启动报错Internal error. Please report to http://jb.gg/ide/critical-startup-errors java.lang.NoClassDefFoundError: org/eclipse/xtext/xbase/lib/Exceptions

    报错内容: IDEA 启动报错 Internal error. Please report to http://jb.gg/ide/critical-startup-errors 报错图为: 我尝试找 ...

  8. 细说javascript typeof操作符

    细说javascript typeof操作符 typeof定义 typeof是一元运算符,用来返回操作数类型的字符串.下面是ECAMScript5.1关于typeof的标准定义: NOTE:上面表格标 ...

  9. 05_jquery 操作table使tr(数据)整行上移下移

    1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...

  10. Spark学习笔记(一)——基础概述

    本篇笔记主要说一下Spark到底是个什么东西,了解一下它的基本组成部分,了解一下基本的概念,为之后的学习做铺垫.过于细节的东西并不深究.在实际的操作过程中,才能够更加深刻的理解其内涵. 1.什么是Sp ...