$.ajax()方法和$.get()方法使用小结
一. 使用JQuery的$.get()方法实现异步请求
1. 编写JSP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/verify_jquery_get.js"></script>
</head>
<body>
<input type="text" id="inputVal"/><br/>
<input type="button" value="获取xml数据" onclick="verifyJqueryGet()"/>
<div id="result"></div>
</body>
</html>
2. 编写verify_jquery_get.js
function verifyJqueryGet() {
$.get("AjaxServer?value="+$('#inputVal').val(),
null,
function (data) {
$('#result').html("<p>"+data+"</p>");
});
}
$.get()方法参数说明:
$.get(url, param, callback(data));
url 请求资源的路径
param 请求参数, 注意将请求参数写在url后, 这里填null
callback(data) 回调函数, 服务器响应数据后, Ajax引擎(xhr)会自动调用该回调函数,数据还没回来时, 页面不会等待, 而是继续执行, 中断...
3. 编写Servlet
/**
* Created by IntelliJ IDEA.
*
* @Auther: ShaoHsiung
* @Date: 2018/8/20 15:12
* @Title: Ajax后台程序
* @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出数据
*/
public class AjaxServer extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置响应内容类型
resp.setContentType("text/html;charset=utf-8");
// 获取输出对象
PrintWriter out = resp.getWriter();
// 获取异步请求参数
String value = req.getParameter("value");
// 设置参数编码为UTF-8
String valueUtf8 = URLDecoder.decode(value, "UTF-8");
// 检验参数
if (valueUtf8==null || valueUtf8.equals("")) {
out.println("用户名不能为空!");
} else {
// 判断参数是否满足条件
if(valueUtf8.equals("young")) {
out.println("用户名可以使用!");
} else {
out.println("用户名无法使用!");
}
}
} @Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
4. 程序演示
二. 使用JQuery的$.ajax()方法实现异步请求
1. 编写JSP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/verify_jquery_ajax.js"></script>
</head>
<body>
<input type="text" id="inputVal"/><br/>
<input type="button" value="获取xml数据" onclick="verifyJqueryAjax()"/>
<div id="result"></div>
</body>
</html>
2. 编写verify_jquery_ajax.js
function verifyJqueryAjax() {
$.ajax({
type: "get", // 请求方式
url: "AjaxXmlServer", // 目标资源
data: "value="+$('#inputVal').val(), // 请求参数
dataType: "xml", // 服务器响应的数据类型
success : function (data) { // readystate == 4 && status == 200
$('#result').html("<p>"+$(data).children().text()+"</p>"); // data是一个dom对象, 先将其转化为jquery对象
}
});
}
小结:
1) js中定义一个对象方式:
var obj1 = {};
var obj2 = {name: "zhang", age: 18};
2) dom->jquery
var $data = $(data)
3) 需要注意jquery对象的children方法的使用
$.ajax()方法参数说明:
type 请求方式 get/post
url 请求资源路径
data 请求参数, 注意格式
dataType 服务器响应的数据类型
success(data) 回调函数, data是一个dom对象
3. 编写Servlet
/**
* Created by IntelliJ IDEA.
*
* @Auther: ShaoHsiung
* @Date: 2018-8-21 12:41:06
* @Title: Ajax后台程序, 返回xml数据
* @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出xml数据
*/
public class AjaxXmlServer extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置响应内容类型为xml
resp.setContentType("text/xml;charset=utf-8");
// 获取输出对象
PrintWriter out = resp.getWriter();
// 获取异步请求参数
String value = req.getParameter("value");
//System.out.println("1" + value);
//System.out.println("2" + new String(value.getBytes("ISO8859-1"), "UTF-8"));
// 设置参数编码为UTF-8
String valueUtf8 = URLDecoder.decode(value, "UTF-8");
// 准备响应的数据
StringBuffer buffer = new StringBuffer();
buffer.append("<message>");
// 检验参数
if (valueUtf8==null || valueUtf8.equals("")) {
buffer.append("用户名不能为空!").append("</message>");
} else {
// 判断参数是否满足条件
if(valueUtf8.equals("young")) {
buffer.append("用户名可以使用!").append("</message>");
} else {
buffer.append("用户名无法使用!").append("</message>");
}
}
// 响应数据
out.print(buffer.toString());
} @Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
备注:
1) 务必设置设置响应内容类型为xml, 否则js代码无法处理响应的数据
4. 程序演示
随机推荐
- Fedora Linux 安装Qt5.2.0
1.下载 qt-linux-opensource-5.2.0-x86-offline.run 2. chmod u+x ./qt-linux-opensource-5.2.0-x86-offline. ...
- opencv-霍夫直线变换与圆变换
转自:https://blog.csdn.net/poem_qianmo/article/details/26977557 一.引言 在图像处理和计算机视觉领域中,如何从当前的图像中提取所需要的特征信 ...
- day 90 跨域和CORS
跨域和CORS 本节目录 一 跨域 二 CORS 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 跨域 同源策略(Same origin policy)是一种约定,它是 ...
- 关于a[::-1]
b = a[i:j] 表示复制a[i]到a[j-1],以生成新的list对象,a[:]就相当于完整复制一份a b = a[i:j:s]表示:i,j与上面的一样,但s表示步进,缺省为1.即从i到j每 ...
- 29-Ubuntu-远程管理命令-03-SSH工作方式简介
在Linux中SSH是非常重要的工具,通过SSH客户端可以连接到运行了SSH服务器的远程机器上. 1.SSH客户端是一种使用Secure Shell(SSH)协议连接到远程计算机的软件程序. 2.SS ...
- Caused by: java.io.FileNotFoundException: class path resource [com/cxy/springboot/mapping/] cannot be resolved to URL because it does not exist
java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...
- 整理及优化CSS代码的7个原则
作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞 ...
- java oop遍历List和Map的几种方法
一.list的遍历 import java.util.*; public class ListTest { public static void main(String[] args) { List& ...
- Vagrant安装步骤
Vagrant安装步骤 下载添加box镜像 vagrant box add base 远端的box地址或者本地的box文件名 建立box镜像关联 vagrant box add centos72 va ...
- 8_InlineHook
1 shellcode低2Gb警告.应使用高2GB 稳定 : 在内核挂钩子: 由于每个进程的低2gb 的数据是不同的:所以 在内核挂钩子 因该把 代码 放在 高 2gb. 方法1(申请): 比如 使用 ...