JQuery AJAX操作代码
更新时间：2023年08月09日 17:33:33 作者：梁云亮
jQuery底层AJAX实现，其返回其创建的XMLHttpRequest对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性，这篇文章给大家介绍JQuery AJAX操作代码，感兴趣的朋友一起看看吧
1、服务器端
1.1、创建web项目
在项目根目录下创建js文件夹并将JQuery文件放入其中：
1.2、服务器端代码
封装返回结果的实体类：
public class Result {
private Integer code;//错误码
private String msg;//提示信息
private String data;//具体内容
//…… getter/setter方法、默认构造方法、全参构造方法
@Override
public String toString() { //返回JSON字符串
return "{\"Result\":{"
+ "\"code\":"
+ code
+ ",\"msg\":\""
+ msg + '\"'
+ ",\"data\":\""
+ data + '\"'
+ "}}";
}
}处理前端页面请求的Servlet
@WebServlet(urlPatterns = "/demoServlet")
public class DemoServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
ServletInputStream is = request.getInputStream();
String str = inputStream2String(is);
PrintWriter out = response.getWriter();
out.write("server received data is :" + str);
out.flush();
out.close();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
PrintWriter out = response.getWriter();
out.write(new Result(200, "OK", name + ":" + pwd).toString());
out.flush();
out.close();
}
public String inputStream2String(InputStream is) { //字节流转为字符流
try (BufferedReader in = new BufferedReader(new InputStreamReader(is, "UTF-8"));) {
StringBuffer buffer = new StringBuffer();
String line = "";
while ((line = in.readLine()) != null) {
buffer.append(line);
}
return buffer.toString();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}2、客户端
2.1、$.ajax([options])
jQuery 底层 AJAX 实现，其返回其创建的 XMLHttpRequest 对象。大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。 $.ajax() 方法的参数是一个键值对形式的JSON对象。最简单的情况下， $.ajax() 可以不带任何参数直接使用。
如果要处理$.ajax()得到的数据，则需要使用回调函数：
- beforeSend：在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
- error：在请求出错时调用（比如：服务器端出错抛出异常）。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
- dataFilter：在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
- success：当请求之后调用（只要求请求成功，不管服务器端的业务是否成功）。传入返回后的数据，以及包含成功代码的字符串。
- complete：当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
常用的options有：
- async：(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
- type：请求方式， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
- url：(默认: 当前页地址) 发送请求的地址。
- contentType：(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。
- data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
- dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。可用值:
- “text”: 返回纯文本字符串
- “json”: 返回 JSON 数据 。
- “xml”: 返回 XML 文档，可用 jQuery 处理。
- “html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
- “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
- “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
示例：
前面页面代码：
<%@ page pageEncoding="UTF-8" %>
<html>
<head>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$.ajax({
async:true,
type:'GET',
url:'${pageContext.request.contextPath}/demoServlet',
data:{'name':'zhangsan','pwd':'1234'},
dataType:'json',
success:function (data) {
console.info(data);
},
error:function () {
console.info("请求失败");
}
});
});
$("#btn2").click(function () {
$.ajax({
type:"POST",
url:'${pageContext.request.contextPath}/demoServlet',
data:"HelloWorld",
dataType:'text',
success:function (data) {
console.info(data);
}
})
});
});
</script>
</head>
<body>
<button id="btn1">Get请求后台数据</button>
<button id="btn2">Post请求后台数据</button>
</body>
</html>运行
单击"Get请求后台数据"，结果：
单击"Post请求后台数据"，结果：
2.2、$…get(url, [data], [callback], [type])
通过远程 HTTP GET 请求载入信息。参数
- url：待载入页面的URL地址
- data： (可选)待发送 Key/value 参数。
- callback ：(可选)载入成功时回调函数。
- type： (可选)返回内容格式，xml, html, script, json, text, _default。
示例：
前端页面代码：
<%@ page pageEncoding="UTF-8" %>
<html>
<head>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$.get('${pageContext.request.contextPath}/demoServlet',
{'name': 'zhangsan', 'pwd': '1234'},
function (data) {
console.info(data);
},
'json'
);
});
</script>
</head>
<body>
<button id="btn1">Get请求后台数据</button>
</body>
</html>2.3、$.getJSON(url, [data], [callback])
通过 HTTP GET 请求载入 JSON 数据。
参数
- url：发送请求地址。
- data ：(可选)Map待发送 Key/value 参数。
- callback ：(可选)载入成功时回调函数。
示例：
前端页面代码：
<%@ page pageEncoding="UTF-8" %>
<html>
<head>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$.getJSON('${pageContext.request.contextPath}/demoServlet',
{'name': 'zhangsan', 'pwd': '1234'},
function (data) {
console.info(data);
}
);
});
</script>
</head>
<body>
<button id="btn1">Get请求后台数据</button>
</body>
</html>2.4、$.post(url, [data], [callback], [type])
通过远程 HTTP POST 请求载入信息。参数
- url：发送请求地址。
- data：(可选)待发送 Key/value 参数。
- callback： (可选)发送成功时回调函数。
- type：(可选)返回内容格式，xml, html, script, json, text, _default。
示例：
前面页面代码：
<%@ page pageEncoding="UTF-8" %>
<html>
<head>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript">
$("#btn2").click(function () {
$.post('${pageContext.request.contextPath}/demoServlet',"HelloWorld",
function (data) {
console.info(data);
},
'text'
)
});
});
</script>
</head>
<body>
<button id="btn2">Post请求后台数据</button>
</body>
</html>注意
使用AJAX时可能会报这样的警告:
Synchronous XMLHttpRequest on the main thread is deprecated
原因是ajax执行了同步操作，即async设置为False，当然它并不影响程序的运行，但建议还是改成True为好(不设置默认为True)。
到此这篇关于JQuery AJAX的文章就介绍到这了,更多相关JQuery AJAX内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
如果看过本文姊妹篇《jqPlot——基于jquery的图表绘制工具》的朋友，应该知道jqPlot大致的操作方法；如果还是不太清楚的话，可以参考jqPlot官方网站的使用方法介绍。2009-07-07
本篇文章主要是对jquery ajax传递中文参数乱码问题及解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。下面脚本之家小编给大家介绍jQuery Timelinr实现垂直水平时间轴插件，需要的朋友参考下2016-02-02
ScrollToFixed (jquery Fixed plugin)能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等等。2015-04-04
这篇文章主要介绍了jQuery实现的简单手风琴效果,结合实例形式分析了jQuery基于事件响应、页面元素属性动态操作实现手风琴效果的方法,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了jQuery中scrollTop()方法用法,实例分析了scrollTop()方法的功能、定义及返回或设置匹配元素的滚动条的垂直偏移量时的使用技巧,需要的朋友可以参考下2015-01-01
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范2012-08-08
这篇文章主要为大家详细绍了省市区三级联动jquery实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
本文详细介绍下使用JQuery实现图片的展开和伸缩，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
这篇文章主要介绍了jQuery中过滤器的基本用法,结合简单实例形式分析了jQuery过滤器针对table表格元素属性进行判断与设置的相关操作技巧,需要的朋友可以参考下2017-10-10
最新评论