$.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. 程序演示
随机推荐
- Java-Class-@I：org.springframework.validation.annotation.Validated
ylbtech-Java-Class-@I:org.springframework.validation.annotation.Validated 1.返回顶部 2.返回顶部 1. package ...
- CodeForces 1152F1 Neko Rules the Catniverse (Small Version)
题目链接:http://codeforces.com/problemset/problem/1152/F1 题目大意 有 n 个星球,给定限制 m,从 x 星球走到 y 星球的条件是,$1 \leq ...
- 20140425 malloc和new不同 dynamic何时返回0
1.malloc/free和new/delete区别 http://blog.csdn.net/hackbuteer1/article/details/6789164 相同点:都可用于申请动态内存和释 ...
- 《DSP using MATLAB》Problem 8.44
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- 在Linux下解压xz压缩文件
1.安装xz命令 # yum install xz -y 2.将xz文件解压为tar文件 # xz -d example.tar.xz 3.将tar文件解压 # tar xf example.tar ...
- EXE 和 SYS 信息交互
操了,分发函数少发一个,让我白调了两个多小时.
- try-with-resources with JDBC
I realize this was long ago answered but want to suggest an additional approach that avoids the nest ...
- vue+ElementUI——表格分页（前端实现方法）
1.使用ElementUI中的<el-table></el-table>和 <el-pagination></el-pagination>组件来实现 2 ...
- 十二. for of 示例 (可以解决大多数应用场景)
for of entries() 可以同时拿到数组的索引跟值 因此可以使用解构的语法: for of 示例 1. 求和 2.字符串
- 廖雪峰Java16函数式编程-2Stream-2创建Stream
1. 方法1:把一个现有的序列变为Stream,它的元素是固定的 //1.直接通过Stream.of()静态方法传入可变参数进行创建 Stream<Integer> s = Stream. ...