步骤1：引入jQuery库
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
步骤2：JS封装
$(function(){
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1}
* async 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
* 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
* type 请求方式("POST" 或 "GET")， 默认为 "GET"
* dataType 预期服务器返回的数据类型，常用的如：xml、html、json、text
* successfn 成功回调函数
* errorfn 失败回调函数
*/
jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {
async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: type,
async: async,
data: data,
url: url,
dataType: dataType,
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1}
* successfn 成功回调函数
*/
jQuery.axs=function(url, data, successfn) {
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: "post",
data: data,
url: url,
dataType: "json",
success: function(d){
successfn(d);
}
});
};
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1}
* dataType 预期服务器返回的数据类型，常用的如：xml、html、json、text
* successfn 成功回调函数
* errorfn 失败回调函数
*/
jQuery.axse=function(url, data, successfn, errorfn) {
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: "post",
data: data,
url: url,
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
});
步骤3：jsp页面js调用
<%@ page language="java" 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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Ajax封装通用类测试</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">
<jsp:include page="/view/common/js_taglib.jsp"></jsp:include>
<script type="text/javascript">
$(function(){
$.ax(
getRootPath()+"/test/ajax.html",
null,
null,
null,
null,
function(data){
alert(data.code);
},
function(){
alert("出错了");
}
);
$.axs(getRootPath()+"/test/ajax.html", null, function(data){
alert(data.data);
});
$.axse(getRootPath()+"/test/ajax.html",
null,
function(){
alert("成功了");
},
function(){
alert("出错了");
});
});
</script>
</head>
<body>
</body>
</html>
相关推荐
对常用jquery的ajax函数进行封装，便于调用，会有不同错误的错误提醒
这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载，通过与Servlet配合，实现了客户端与服务器间JSON数据的交换。理解这些概念和实践，对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...
jQuery封装了AJAX操作，提供了一套简洁的API，如`$.ajax()`, `$.get()`, `$.post()`等，使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型：服务器端分页和客户端分页。服务器端分页意味着每次用户翻页时，...
接下来，我们可以定义一个全局的Ajax封装类，称为“linjq”，这个封装类通过内部的函数来实现不同的请求方式，并且可以处理各种请求参数和回调函数。封装类通常定义在文档加载完成后立即执行的函数中，这样做可以...
在提供的文件中，`common_gui.js`可能包含了自定义的Ajax封装，而`jquery.json-2.2.min.js`可能是用于解析JSON数据的辅助工具。在实际使用时，结合这些资源，我们可以构建更高效、更安全的Ajax通信流程。
一个简洁的Ajax封装类通常包括几个参数：请求地址`url`、发送的数据`data`、请求方式`type`、请求类型`dataType`、请求成功回调函数`successfn`和请求失败回调函数`errorfn`。根据这些参数，可以封装成多个不同的...
在使用 jQuery 进行 AJAX 开发时，常常需要对原生的 AJAX 方法进行封装，以符合特定场景下的需求。以下是使用 jQuery 进行 AJAX 封装时应该掌握的知识点： 1. jQuery AJAX 方法基础： - jQuery 提供了简单的 AJAX ...
在jQuery库中，AJAX功能被简化并封装成了易于使用的API。`$.ajax()`是jQuery提供的核心AJAX函数，它允许我们配置各种选项来定制请求，如URL、请求类型（GET或POST）、数据类型（JSON、XML、HTML等）以及请求成功或...
jQuery 封装了复杂的 XMLHttpRequest 对象，使得 AJAX 请求变得更加简单易用。 - **发送请求**： - 创建 XMLHttpRequest 对象。 - 设置请求类型（GET 或 POST）和 URL。 - 发送请求。 - **接收响应**： - 监听...
《浅析jQuery Ajax通用js封装》 在现代Web开发中，Ajax...首先引入jQuery库，然后创建通用的Ajax封装函数，最后提供了简化的调用方式。这样的封装有助于我们在项目中更高效地进行数据交互，简化前端与后端的通信过程。
jQuery封装了AJAX函数，使得开发者可以更轻松地使用AJAX。 **AJAX工作原理** 1. **用户触发事件**：用户在计算器界面上输入数字或点击运算符按钮。 2. **创建AJAX请求**：jQuery的`.ajax()`方法用于创建AJAX请求。...
AJAX 使用的技术包括 XMLHttpRequest 对象，但在 JQuery 中，这个过程被简化和封装，提供了易于使用的 API。 例如，`$.get()` 方法是 AJAX 的一个简单实现，用于发送 GET 请求。在提供的代码片段中，`$.get()` 接受...
本文将介绍easy-ajax封装后的常用方法。 首先，提到easy-ajax，其本质是一个为了治理前端开发者在编写Ajax请求时出现的混乱局面而产生的工具。其封装的目标是提供一种统一的方法来处理Ajax请求，包含默认的jQuery ...
在JavaScript的世界里，jQuery库以其简洁的API和强大的功能，为开发者提供了便利的DOM操作、事件处理以及Ajax交互。在Web开发中，`jQuery.ajax()`是进行异步数据请求的核心方法，它允许我们与服务器进行通信，获取或...
jQuery的$.ajax()方法提供了对AJAX的封装，使得开发者可以方便地发起AJAX请求。 ### 2. jQuery AJAX基本用法 `$.ajax()`函数接受一个包含各种选项的对象作为参数，用于配置AJAX请求。例如： ```javascript $.ajax...
- **$.ajax()**：这是 jQuery 中最底层也是最灵活的 Ajax 封装方法。它可以处理各种类型的 Ajax 请求，并允许开发者自定义请求的各个方面。 - **.load()**、**$.get()** 和 **$.post()**：这些方法是基于 $.ajax() ...
在Jquery中，Ajax功能被封装在了一系列易于使用的函数中，如`$.ajax()`、`$.get()`和`$.post()`等。 对于本例中的简易计算器，我们可能会有一个HTML界面，包含数字按钮、运算符按钮、输入框以及结果展示区域。用户...
在jQuery中，Ajax功能被封装得十分友好，使得开发者可以轻松地实现异步数据交换。 **一、jQuery中的Ajax基础** 1. **$.ajax()函数**：这是jQuery中最核心的Ajax方法，可以接受多个参数来定制请求。例如，URL、类型...
jQuery通过封装了原生的XMLHttpRequest对象，使AJAX调用变得非常简单。使用`$.ajax()`方法是主要的实现方式： ```javascript $.ajax({ url: 'your_server_page.php', type: 'GET'或'POST', data: {param1: value...