使用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和 ...
随机推荐
- Hibernate: 数据持久层框架
Hibernate 是一种Java语言下的对象关系映射解决方案. 它是使用GNU宽通用公共许可证发行的自由.开源的软件.它为面向对象的领域模型到传统的关系型数据库的映射,提供了一个使用方便的框架.Hi ...
- Wireshark 与 Tcpdump
[1]Wireshark 与 Tcpdump Wireshark是Windows下非常容易上手的抓包工具.但在Linux下很难找到一个好用的图形界面抓包工具.还好有Tcpdump.我们可以用Tcpdu ...
- Expression Tree上手指南 (一)
大家可能都知道Expression Tree是.NET 3.5引入的新增功能.不少朋友们已经听说过这一特性,但还没来得及了解.看看博客园里的老赵等诸多牛人,将Expression Tree玩得眼花缭乱 ...
- 在Linux中显示日历(cal)
cal 2013 显示2013年整年日历 cal 7 2013 显示2013年 7 月 日历
- 解决QT:forward declaration of 'struct Ui::xxx';invalid use of incomplete struct "Ui::Widget" 等莫名奇异错误
今天在进行QT Widget的UI设计时,改了下Widget的对象名,然后在多次成功编译执行后,执行清理,又一次构建,就出现了好多莫名奇异的错误: widget.h:12: 错误:forward de ...
- poj1861 最小生成树 prim & kruskal
// poj1861 最小生成树 prim & kruskal // // 一个水题,为的仅仅是回味一下模板.日后好有个照顾不是 #include <cstdio> #includ ...
- POJ 2187 Beauty Contest【凸包周长】
题目: http://poj.org/problem?id=1113 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...
- Frobenius inner product
https://en.wikipedia.org/wiki/Frobenius_inner_product Frobenius norm
- Residual (numerical analysis)
In many cases, the smallness of the residual means that the approximation is close to the solution, ...
- Mac标识物理位置算法 import Levenshtein mac列表特征值
mac 字符串 与 基准字符串的 Levenshtein 距离,考虑 mac信号强度的时序性,60秒内若干次变化 不引入强度 mac字符串的唯一性 如何排序 基准字符串的选取 同一尺度 都按强度 ...