$.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. 程序演示
随机推荐
- 制作windows puppet openstack镜像
由于电信需要远程部署软件,拟使用puppet进行远程服务管理 前提 windows系统已经安装 windows已经安装virtio driver 远程桌面开启,最好关闭防火墙 设置MTU 在没有安装c ...
- 使用Devstack部署neutron网络节点
本文为minxihou的翻译文章,转载请注明出处Bob Hou: http://blog.csdn.net/minxihou JmilkFan:minxihou的技术博文方向是 算法&Open ...
- 分道扬镳 /// 邻接表 DFS 剪枝 oj1332
题目大意: 编号为1…N 的N个城市之间以单向路连接,每一条道路有两个参数:路的长度和通过这条路需付的费用. Bob和Alice生活在城市1,但是当Bob发现了Alice玩扑克时欺骗他之后,他决定与她 ...
- mysql 数据库基本命令
停止mysql服务:net stop mysql //管理员方式运行 启动mysql服务:net start mysql 进入数据库:mysql -u root -p 查看数据库:show ...
- JS对象 神奇的Math对象，提供对数据的数学计算。注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
Math对象 Math对象,提供对数据的数学计算. 使用 Math 的属性和方法,代码如下: <script type="text/javascript"> var m ...
- PHP算法之猜数字
小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的guess数组为 小 ...
- 通讯录查询（Profile Lookup）——freeCodeCamp
- js里json和eval()
JSON * - JS中的对象只有JS自己认识,其他的语言都不认识 * - JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别, * 并且可以转换为任意语言中的对象,JSON在开发中主 ...
- PKUSC加油加油加油！
一句话,把学过的掌握的甚至还未掌握的,都用上吧! 1.题目不要再再再看错了!在纸上记下关键字. 2.记得有预处理这个东西可以降低复杂度! 3.仔细阅读数据范围,取值范围的0要注意! 4.不要每次像开新 ...
- springboot+mybatis 非web项目构建
https://blog.csdn.net/wlittlefive/article/details/86157134 https://blog.csdn.net/ththcc/article/deta ...