JavaWeb Ajax 详解,java 开发面试问题大全及答案大全
xhr.open("POST","ajax.do",true);
//设置请求头,数据的类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//调用 send 方法,发送参数
xhr.send("username=张三");
}
</script>
</body>
</html>
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
=========================================================================
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);
}
);
});
});
[](
)Ajax 案例
====================================================================
案例:验证注册用户手机号是否存在
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>
评论