JavaWeb Ajax 详解，java64 位 3 下载百度云盘
Servlet 代码
/**
测试 Ajax
@author xray
*/
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//获得 Ajax 发送的参数
String name = req.getParameter("name");
//给浏览器发送数据
resp.getWriter().print(name+"你好啊，我是服务器！！！");
}
}
=========================================================================
JQuery 提供了几种 ajax 方法：
$.ajax
参数：
type 请求方法类型，GET、POST
url 服务器地址，必须
data 请求参数
async 是否异步
success 成功接收数据的回调函数
error 错误情况的回调函数
$.ajax({type:"post",url:"ajax.do",data:{username:"张三"},
success:function(text){
更新 text 数据到页面
}
});
$.post
$.post("URL",{参数名:值},
function(text){
更新页面
}
);
$.get
$.get("URL?参数",
function(text){
...
});
使用 JQuery 的 ajax 方法
$(function(){
//设置点击事件
$("#test").click(function(){
//使用 ajax 方法连接服务器
/* $.ajax({type:"POST",data:{username:"李四"},url:"ajax.do",
success:function(text){
//更新页面内容
$("#test").text("服务器说："+text);
}
}); */
//使用 post 方法
/* $.post("ajax.do",{username:"王五"},
function(text){
//更新页面内容
$("#test").text("服务器说："+text);
}
); */
//使用 get 方法
$.get("ajax.do?username=赵六",
function(text){
//更新页面内容
$("#test").text("服务器说："+text);
}
);
});
});
====================================================================
案例：验证注册用户手机号是否存在
1、在 UserDAO、UserService 添加手机号是否存在查询方法
2、创建 Servlet，接受 Ajax 传来的手机号，进行查询，将结果用流发送给浏览器
3、在添加用户的页面添加 Ajax 方法，在手机输入框失去焦点时调用验证。
/**
查询用户电话是否存在
@author xray
*/
public class FindUserTelServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//接受 Ajax 函数传来的手机号
String user_tel = req.getParameter("user_tel");
//调用数据库查询
UserService service = new UserServiceImpl();
boolean find = service.findUserTel(user_tel);
//将结果发送给 Ajax
resp.getWriter().print(find);
}
}
注册表单
<form action="register.do" method="post" enctype="multipart/form-data">
<span id="user_tel_msg"></span><br>
<input name="user_tel" type="text" placeholder="请输入手机号"><br>
...
</form>
<
/div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//绑定手机号输入框的失去焦点事件
$(":text[name='user_tel']").blur(function(){
//调用 post 方法
.post("findTel.do",{user_tel:(this).val()},function(text){
还未添加个人签名 2021.03.18 加入
还未添加个人简介
评论