Jquery书写ajax
根据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的更多相关文章
- JQuery书写Ajax的几种方式?
1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...
- Jquery书写AJAX动态向页面form传数据，清空之前的数据
三种方式: 直接代码: 1.$("#mytable tr:gt(0)").remove(); 2.$("#mytable tr:not(:first)").em ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Struts2 使用jQuery实现Ajax
在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- jQuery基础---Ajax基础教程（二）
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
- jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...
- Jquery的AJAX应用详解
案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...
随机推荐
- bzoj2841
边双联通分量 具体详解蓝书上十分详细,因为必须是奇数个人坐在一起,那么一个人如果能选上,就必须处在一个简单奇圈中.而奇圈也是一个边双联通分量,所以我们先把边双联通分量都挖出来,然后进行二分图染色. 奇 ...
- 自动生成Makefile的全过程详解
一.简介 Linux下的程序开发人员,一定都遇到过Makefile,用make命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile,如果要想写出一个符合自由软件惯例的 ...
- android api level对应表(copy)
Platform Version API Level VERSION_CODE Notes Android 4.4 19 KITKAT Platform Highlights Android 4.3 ...
- AngularJS过滤器filter-保留小数-渲染页面-小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- [App Store Connect帮助]一、 App Store Connect 使用入门（1）App Store Connect 工作流程
您使用 App Store Connect 提交并管理您在 App Store 中销售的 App,使用 TestFlight 分发您 App 的 Beta 版本,接受法律协议,输入您的税务和银行业务信 ...
- [Swift通天遁地]二、表格表单-(18)快速应用多种预定义格式的表单验证
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- JavaScript中相等==和严格相等===的区别
在JavaScipt中==(相等)和===(严格相等,strick equality 也有译作“恒等”.“全等”)用于比较两个值是否相等,两个运算符允许任意类型的操作数.如果操作数相等则返回true, ...
- 最全的C/C++入门到进阶的书籍推荐，你需要嘛？
编程是操作性很强的一门知识,看书少不了,但只有学习和实践相结合才能起到很好的效果,一种学习方法是看视频->看书->研究书中例子->自己做些东西->交流->看书. 研究经典 ...
- php 获取客户端的真实ip地址 通过第三方网站
<?php include 'simple_html_dom.php'; // 1获取真实IP地址方式 function get_onlineip() { $ch = curl_init('ht ...
- 软件图标显示不正常【win7企业版】
现象: 原因: 图标缓存没有把该软件图标建立起来 解决: 一. 1.找到 IconCache.db 2.你要把电脑隐藏文件打开不然找不到这个文件的,组织—文件夹及搜索选项——查看——显示隐藏文件.文件 ...