$.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 18~20 中Qt 5.2.1 解决连接mysql数据库出现QMYSQL driver not loaded的问题
QT += sql //在.pro文件里加入这一句 //包含头文件 #include <QDebug> #include <QSqlQuery> #include ...
- 27. USART, Universal synchronous asynchronous receiver transmitter
27.1 USART introduction 通用同步异步接收发射机(USART)对需要NRZ异步串行数据格式行业标准的外部设备,提供了一个灵活的全双工数据交换的方法.USART使用分数波特率生成器 ...
- 如何在Spring Boot 中动态设定与执行定时任务
本篇文章的目的是记录并实现在Spring Boot中,动态设定与执行定时任务. 我的开发项目是 Maven 项目,所以首先需要在 pom.xml 文件中加入相关的依赖.依赖代码如下所示: <de ...
- 在普通类中获取Spring管理的bean
1.在项目中添加下面的类: import org.springframework.context.ApplicationContext; import org.springframework.cont ...
- iOS开发系列-打印内存地址
打印内存地址 基本数据类型 定义一个基本数据类型,会根据变量类型分配对应的内存空间.比如定义一个int类型的变量a. int a = 10; 内存如下 输入变量a在内存中内存地址 NSLog(@&qu ...
- C 语言源代码说明
void bdmain(void){/* 禁止 Cache 和 MMU */ cache_disable(); mmu_disable(); /* 端口初始化 */ port_init(); /* 中 ...
- VS环境下，DEV插件的ComboBoxEdit控件最简单的数据源绑定和获取方法
使用 ComboBoxEdit 控件绑定key/value值: 因为 ComboBoxEdit 没有 DataSource 属性,所以不能直接绑定数据源,只能一项一项的添加. 首先创建一个类ListI ...
- 安装rubygems
转载 http://blog.csdn.net/huanghai200911/article/details/51251472 1,下载rubygems-2.4.8.tar包,下载地址:https:/ ...
- String = ""和String = null的区别
在这要先说明下 String str;和String str=null;的关系,代码上来说两者几乎不差什么,但是这里String str=null;多了个指向空的引用 而String str ;却只是 ...
- thinkphp 运算符
我们可以对模板输出使用运算符,包括对“+”“ –” “*” “/”和“%”的支持. 大理石平台厂家 例如: 运算符 使用示例 + {$a+$b} - {$a-$b} * {$a*$b} / {$a/$ ...