这篇文章讲的是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. Android 隐藏顶部菜单栏

    Android 隐藏状态栏 在Activity中: getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); 在fragmen ...

  2. Mac常用的软件推荐

    Alfred 效率软件,让能更快的启动各种软件 VScode 编辑器,市面上最热的编辑器,好用的不只是一点点,加上Vim插件简直就是秒杀市面上各种IDE PicGo 一个开源图床软件,支持各大网站的图 ...

  3. 【瞎讲】 Cayley-Hamilton 常系数齐次线性递推式第n项的快速计算 (m=1e5,n=1e18)

    [背诵瞎讲] Cayley-Hamilton 常系数齐次线性递推式第n项的快速计算 (m=1e5,n=1e18) 看CSP看到一题"线性递推式",不会做,去问了问zsy怎么做,他并 ...

  4. $HDU1846\ Brave\ Game$ 博弈论

    正解:博弈论 解题报告: 传送门! 巴什博奕板子题鸭$QwQ$ 就有个结论,是说当$(m+1)\mid n$时先手必败,否则必胜 这个瞎证明一下就能出来 就考虑当$(m+1)\mid 1$时,若先手取 ...

  5. 浅析Java hashCode()方法

      散列码(hash code)是由对象导出的一个整数值. 散列码没有规律,两个不同的对象x和y,x.hashCode()与y.hashCode()基本上不会相同. public static voi ...

  6. spring cloud 微服务之 -- 配置文件拆分之道

    0-前言 在spring cloud微服务架构中,基本上每个拆分的微服务都会部署多个运行实例,这些运行实例,配置基本都是一样的,不同的是少数配置,比如端口,而这些不同的配置又是必不可少的 那我们怎么来 ...

  7. 「洛谷P3931」 SAC E#1 - 一道难题 Tree

    P3931 SAC E#1 - 一道难题 Tree 题目背景 冴月麟和魏潇承是好朋友. 题目描述 冴月麟为了守护幻想乡,而制造了幻想乡的倒影,将真实的幻想乡封印了.任何人都无法进入真实的幻想乡了,但是 ...

  8. 1037 在霍格沃茨找零钱 (20 分)C语言

    题目描述 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二 十九个纳特(Knut)兑一个西可 ...

  9. 1033 旧键盘打字 (20 分)C语言

    题目描述 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入描述: 输入在2行中分别给出坏掉的那些键.以及应 ...

  10. （三）Django模板语言

    一.字典,列表,类在template模板中的使用 在视图函数中,即views.py中进行传值操作,可通过render方法,进行传值 from django.shortcuts import rende ...