根据API学习本章

Jquery书写ajax

使用ajax发送表单到servlet,发送时显示等待图片,servlet处理完返回信息,在页面显示返回信息,并且隐藏等待图片

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'ajax.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(function() {

$("#submit").click(

function() {

var param = {

name : $("#name").val(),

age : $("#age").val()

};

$.ajax({

type : "GET",

url : "oneServlet",

cache : false,

data : param,

beforeSend : function() {// 在发送请求之前触发的事件

$("img").show();

},

complete : function() {// 在发送请求完成之后触发的事件

$("img").hide();

},

success : function(data) {// 在请求成功后触发的事件

alert(data);

},

error : function(XMLHttpRequest, textStatus, errorThrown) {// 在请求失败时候触发

alert(XMLHttpRequest.status + "   " + textStatus + "  "+ errorThrown);

}

});

});

});

</script>

</head>

<body>

<form>

<table>

<tr><td align="right">user name:</td><td><input type="text" id="name"></td></tr>

<tr><td align="right">age:</td><td><input type="text" id="age"></td></tr>

<tr><td></td><td><input type="button" id="submit" value="submit" ></td></tr>

</table>

<img src="img/wait.gif" style="display:none">

</form>

</body>

</html>

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

/*try {

Thread.sleep(5000);

} catch (InterruptedException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}*/

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

String name=request.getParameter("name");

String age=request.getParameter("age");

out.print(name+"  "+age);

out.flush();

out.close();

}

jQuery中ajax的应用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">

$(function(){

$("button:eq(0)").click(function(){

var param={"name":"张三","age":"33" };

$.get("oneServlet",param,function(data){

alert(data);

});

});

$("button:eq(1)").click(function(){

$.getJSON("json/name.json",function(data){

alert(data);

for(var i=0;i<data.length;i++){

var map=data[i];

alert(map.name+" "+map.age);

}

});

});

$("button:eq(2)").click(function(){

$.getScript("js/aa.js");

});

$("button:eq(3)").click(function(){

var param={"name":"张三","age":33 };

$.post("oneServlet",param,function(data){

alert(data);

});

});

$("button:eq(4)").click(function(){

$("div").load("index.jsp");

});

});

</script>

</head>

<body>

<button>get</button><br>

<button>getJSON</button><br>

<button>getScript</button><br>

<button>post</button><br>

<button>load</button><br>

<div></div>

</body>

</html>

其中:

son/name.json

[{

"name":"zhangsan",

"age":"22"

},{

"name":"wangwu",

"age":"33"

},{

"name":"lisi",

"age":"44"

}]

js/aa.js

alert("aaaaaaaaaa");

Jquery书写ajax的更多相关文章

  1. JQuery书写Ajax的几种方式?

    1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...

  2. Jquery书写AJAX动态向页面form传数据,清空之前的数据

    三种方式: 直接代码: 1.$("#mytable tr:gt(0)").remove(); 2.$("#mytable tr:not(:first)").em ...

  3. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  4. Struts2 使用jQuery实现Ajax

    在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...

  5. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  6. jQuery基础---Ajax基础教程(二)

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

  7. jQuery基础---Ajax进阶

    原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...

  8. Jquery的AJAX应用详解

    案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...

  9. Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...

随机推荐

  1. python自动化测试学习笔记-5常用模块

    上一次学习了os模块,sys模块,json模块,random模块,string模块,time模块,hashlib模块,今天继续学习以下的常用模块: 1.datetime模块 2.pymysql模块(3 ...

  2. tomcat解决 java.lang.IllegalArgumentException: Request header is too large

    tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large 原因:请求头超过 ...

  3. 初步认识kafka

    Kafka是用于日志处理的分布式消息队列,Kafka使用scala语言开发的. 各个开源分布式处理系统Cloudera.Apache Storm.Spark都支持与Kafka集成.其日志处理的一个场景 ...

  4. Unicode gbk gb2312 编码问题 [转载]

    原文地址: http://www.cnblogs.com/csn0721/archive/2013/01/24/2875613.html HTML5 UTF-8 中文乱码   <!DOCTYPE ...

  5. 1A课程笔记分享_StudyJams_2017

    1A课程 概述 课程1A主要讲解了Android UI的三种基本控件:TextView.ImageView以及Button.笔记的主体内容主要根据课程内容的讲解顺序来组织,此外我对一些个人比较感兴趣的 ...

  6. Storm 入门一:基本知识+网上资源链接

    Strom首页:http://storm.apache.org/ 下载地址:http://www.apache.org/dyn/closer.lua/storm/apache-storm-1.1.0/ ...

  7. JS——轮播图高级版

    需求: 1.页面需要小图标和箭头 2.定时器不断的滑动图片 3.在点击箭头时,图标和图片随即做出响应 核心思想: 1.往左移动到第一张的情况:在第二张移动到第一张时,这个动画效果完成之后,立刻将ul的 ...

  8. MyEclipse快捷键 (精简)

    在调试程序的时候,我们经常需要注释一些代码,在用Myeclipse编程时,就可以用 Ctrl+/ 为选中的一段代码加上以 // 打头的注释:当需要恢复代码功能的时候,又可以用Ctrl+/ 去掉注释.这 ...

  9. CNN结构:色彩空间建模-色彩空间分析

    原文: 色彩空间基础 好一个NB的知乎专栏:色彩空间基础 第一章:色彩空间基础 关于色彩分析,引出了专门的数学基础.整个过程给出了完备的数学阐述,虽然没有试验数据,论述的相当精彩. 摘抄出一段:  上 ...

  10. python 模块学习——time模块

    Python语言中与时间有关的模块主要是:time,datetime,calendar time模块中的大多数函数是调用了所在平台C library的同名函数, 所以要特别注意有些函数是平台相关的,可 ...