使用jquery执行ajax
$.ajax():返回其创建的XMLHttpRequest对象
回调函数：
如果要处理$.ajax()得到的数据，则应该使用回调函数！
beforeSend：在发送请求之后调用，需要一个XMLHttpRequest作为参数
error：请求出错后调用。参数XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象
dataFilter 在请求成功之后调用。传入返回的数据以及“dataType“参数的值。并且必须返回新的数据（可以是处理过的），传递给success函数
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成败。传入XMLHttpRequest对象以及一个带有成功错误信息的字符串。
数据类型：
$.ajax()函数依赖服务器提供的信息处理返回的数据。如果服务器报告是返回数据xml，可以使用普通xml方法或者jquery选择器。其他类型使用文本形式对待
dataType可以指定数据处理方式。除了淡村的XML，还可以指定html、json、jsonp、script或者text
其中text和xml不会处理，返回XMLHttpRequest的responseText或responseHTML得到的值
注意：如果返回的是xml，在服务端必须声明text/xml或者application/xml来获得一致结果
如果指定为json类型，会将获取到的数据作为一个javaScript对象解析，并将构建好的对象返回
发送数据到服务器
默认情况下Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值
date选项可以包含一个查询字符串，比如key1=value1&key2=value2，也可以是一个映射，如：{key1：‘value1’，key2：‘value2’}
例子1：加载并执行js文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(function(){
$("button").click(function(){
$.ajax({
type:"GET",
url:"js/test.js",
dataType:"script"
});
});
});
</script>
</head> <body>
<button>点击我</button>
<h1></h1>
</body>
</html>
01.jsp
alert("Hello,js");
test.js
例子2：保存数据到服务器，成功时显示信息：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(function(){
$("button").click(function(){
$.ajax({
type:"POST",
url:"<c:url value='/AServlet'/>",
data:"name=John&location=Boston",
success:function(msg){
//$("h1").html(msg);
alert("Date Saved:"+msg);
}
});
});
});
</script>
</head> <body>
<button>点击我</button>
<h1></h1>
</body>
</html>
02.jsp
public class AServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
String location=request.getParameter("location");
response.getWriter().print("得到的信息"+name+"--"+location);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
AServlet
例子3：装载html
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(function(){
$("button").click(function(){
$.ajax({
url:"html/test.html",
success:function(msg){
$("h1").append(msg);
}
});
});
});
</script>
</head> <body>
<button>点击我</button>
<h1></h1>
<h3>你好啊</h3>
</body>
</html>
03.jsp
<!DOCTYPE html>
<html>
<head>
<title>test.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head>
test.html
使用$.get(url,[data],[callback],[type])
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(function(){
$("button").click(function(){
$.get("AServlet",
{name:"John",location:"Boston"},
function(msg){
alert("Date Saved:"+msg);
}); });
});
</script>
</head> <body>
<button>点击我</button>
<h1></h1>
</body>
</html>
04.jsp
package cn.itcast.servlet; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class AServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8"); String name=request.getParameter("name");
String location=request.getParameter("location");
response.getWriter().print("得到的信息"+name+"--"+location);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8"); String name=request.getParameter("name");
String location=request.getParameter("location");
response.getWriter().print("得到的信息"+name+"--"+location);
} }
serialize():
这个方法可以序列化表格内容为字符串。可以配合ajax使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(function(){
$("#results").append("<tt>"+$("form").serialize()+"</tt>");
});
</script>
</head> <body>
<button>点击我</button>
<p id="results"><b>Results:</b></p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multipart</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/>check1
<input type="checkbox" name="check" value="check2" checked="checked">check2
<input type="radio" name="radio" value="radio1" checked="checked"/>radio1
<input type="radio" name="radio" value="radio2" />radio2
</form>
</body>
</html>
05.jsp
serializeArray():
这个方法可以序列化表单成json对象而不是字符串
$.post
使用了serialize()和$.post(url,[data],[callback],[type])的小例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript">
$(function(){
$("input[type='button']").click(function(){
$.post(
"BServlet",
$("form").serialize(),
function(msg){
alert(msg);
});
});
});
</script>
</head> <body>
<form>
用户名:<input type="text" name="username"><br/>
密码：<input type="password" name="password"><br/>
<input type="button" value="测试一下">
</form>
</body>
</html>
06.jsp
package cn.itcast.servlet; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class BServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8"); String username=request.getParameter("username");
String password=request.getParameter("password"); response.getWriter().print(username+"---"+password);
System.out.println(username+"---"+password);
} }
BServlet
使用jquery执行ajax的更多相关文章
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- jQuery中ajax方法无法执行回调函数问题
最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...
- jquery 使用ajax，正常返回后，不执行success的问题
背景: 在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数. 原因: 然后继续下载了几个jquery版本,如1.3.2, ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- Jquery等待ajax执行完毕继续执行（断点调试正常，运行异常）
以前写过一个程序,发现用断点调试的时候,一步步的运行,程序是可以的,但是去了断点程序就出现了问题. $(document).ready(function(){ var arra=new Array() ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
- jQuery与ajax 基础运用
jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等 但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...
- JQuery中$.ajax()方法参数详解 及 async属性说明
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
随机推荐
- resin 4.0 项目的配置
前一篇我们了解了resin中配置数据源,依照不同项目的要求我们进行数据源的配置,如多个项目共享多个数据源,一个项目配置多个数据源,以下我们来看看项目的部署方式: 1.在一个host(虚拟主机)下配置一 ...
- PHP新手必学之刚进公司装环境
由于今天去一家公司做项目,又重新的装了一遍所熟悉的PHP环境,所以记录下来,总结下. PHP环境主要: PHPstudy(apache+mysql+php)+phpstorm+navicate 解释: ...
- Android笔记之使用ZXing扫描二维码
ZXing发布版下载地址:https://github.com/zxing/zxing/releases 为了能让官方Demo跑起来,先把ZXing核心部分core复制到自己的工程里 还要把andro ...
- Android笔记之GridView
完整Demo链接:https://pan.baidu.com/s/1d_G9aCwBxpiYQcdQhwSDDw,提取码:5deh 效果图 activity_main.xml <?xml ver ...
- Virtualbox报错------> VirtualBox虚拟机下鼠标不正常的解决方法
在Virtualbox虚拟机下,突然发现鼠标使用不正常.出现2个鼠标,一个是Ubuntu主机下面的鼠标,一个是Window7下的鼠标,但是Win7下的鼠标不可以看得到,但是点击鼠标左右键可以看到有反应 ...
- iOS线程浅析
一.线程概述 1. iOS里面的线程按种类可分为同步线程和异步线程.同步线程指调用同步线程的地方必须等到同步线程运行完成才干够继续向下运行.而调用异步线程的地方则在运行完调用异步线程的语句后就能够继续 ...
- SAP 改表方法
SAP中直接修改表.视图的Tcode有SE16N和SM30. 1. SE16N修改表需要先输入命令&SAP_EDIT,回车左下角显示激活SAP编辑功能后,就可以对相应的表进行新增.删除.修改的 ...
- （转）Javascript模块化编程（二）：AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- pinpoint改造支持查询
原架构 改造后架构
- ZOJ - 1505 Solitaire 【双向BFS】
题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1505 题意 一个8 * 8 的棋盘上面有四个棋子 棋子可以上下左 ...