AJAX异步请求数据
文章目录
- 前言
- 一、AJAX是什么？
- 二、使用步骤
-
- 1.语法格式
- 2.示例
- 2.注意事项
- 总结
前言
本篇主要介绍怎么使用AJAX向服务器请求数据。
一、AJAX是什么？
异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端
二、使用步骤
1.语法格式
代码如下：
$.get(url,data,function(data){
})
发送get请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,
形如 { name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据
--------------------------------------------------------------------
$.post(url,data,function(data){
})
发送post请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,
形如 { name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据
--------------------------------------------------------------------
$.ajax()是综合应用,
1) 可以随意指定请求方式
2) 可以指定发送到后台的数据类型
一般表单发送的数据,称作表单数据,形如name=admin&pwd=123456
servlet后台使用req.getParameter()接收
可以指定为json数据,形如{"name":"admin","pwd":"123456"}
servlet后台使用字符流读取数据,拼接成json串
3) 可以指定接收数据的格式
--------------------------------------------------------------------
$.ajax({
url:"", // 请求路径
type:"get|post", // 指定请求方式,不写默认是get
contenType:"application/x-www-form-urlencoded", // 默认的,发送表单数据
// "application/json" , 按json格式发送
data:"name=admin&pwd=123456", // 发送到后台的数据
// 如果是指定是json格式,此处应该{"name":"admin","pwd":"123456"}
success:function(data){ // 请求成功的回调,data就是后台返回的数据
},
error:function(){ // 请求异常的回调函数
alter("服务器正忙,稍后再试");
}
})
2.示例
需求: 注册时,写完用户名,提示该用户名是否存在可否注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
用户名<input id="input-1" type="text" name="username"> <span id="span-1"></span>
<script src="/day42/js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$("#input-1").blur(function (){
var name = $("#input-1").val();
// $.get 发送到后台的数据,其实表单数据
$.get("/day42/check/user",{username:name},function (data){
// console.log(data);
// 后台返回的是json数据
if (data.code == 200) {
$("#span-1").text(data.msg)
$("#span-1").css("color","green")
} else {
$("#span-1").text(data.msg)
$("#span-1").css("color","red")
}
})
})
</script>
</body>
</html>
package com.qf.servlet;
import com.qf.model.User;
import com.qf.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* --- 天道酬勤 ---
*
* @author QiuShiju
* @desc
*/
@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 接收数据
String username = req.getParameter("username");
System.out.println("CheckUserServlet.doGet() username = " + username );
// 传递数据给service
UserServiceImpl userService = new UserServiceImpl( );
User user = userService.findUserByUsename(username);
System.out.println("CheckUserServlet.doGet() user = " + user );
// 设置响应的内容类型为json格式
resp.setContentType("application/json;charset=utf-8");
// 响应json数据,拼接json
PrintWriter out = resp.getWriter( );
// 判断
if (user != null) { // 已存在,不能再注册
// 响应json数据
out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");
} else { // 不存在,可以注册
out.write("{\"code\":200,\"msg\":\"可以注册\"}");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
2.注意事项
使用 $.ajax, 以get请求发送json数据,后台servlet可以使用req.getParameter(“”)来接收数据
使用 $.ajax,以post请求发送json数据,后台servlet不可以使用req.getParameter(“”)来接收数据,应该使用输入流来读取json字符串
总结
AJAX是一种异步请求技术，能控制页面的局部刷新，应用范围十分广泛。它有三种格式，$.get()
$.post()，和 $.AJAX（）。在使用时要注意传值和回调函数可能会出现的问题。