您现在的位置是:首页 > Javascript
当前栏目
Ajax 技术应用 (jQuery 实现账户验证)
2023-04-18 14:51:07 时间
Ajax 应用 with jquery
最近在学习 jquery,学习到 ajax 部分了,就把之前做过内容使用 jquery 实现一遍
这两篇是我使用 纯 js 实现的,可以先看这个,注解我也写的比较详细 Ajax 技术学习 (Java EE 实现) —— 用户账户的验证
一、前端部分
1.1 html 部分
<form action="">
用户名:<input type="text" name="username" id="username" /><span id="info">span><br />
密 码:<input type="password" name="password" id="password" />br>
<input type="submit" id="submit" value="提交" />
form>
1.2 js 部分
这里是 jQuery 的语法,写起来相比原生的 js 代码简洁太多,发送 get 请求 或者 post 请求均使用大写即可
<script type="text/javascript">
$(function () {
$("#username").bind("blur", function() {
txt = $("#username").val();
$.ajax({
type: "POST",
url: "AjaxCheck",
data: {
username:txt
},
success: function(res) {
console.log("发送成功:"+res);
if (res == "true") {
$("#info").html("该账号可以使用");
} else{
$("#info").html("该账号不可以使用");
}
},
error: function() {
console.log("糟糕,出现错误了");
}
});
});
});
</script>
二、后端部分
后端我依然是采用的 Java EE 来实现的,和前面写过的验证基本相差不大,后端的路径是 AjaxCheck
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// 获取前端传送过来的数据
String username = request.getParameter("username");
// 打印得到数据
System.out.println(username);
//
PrintWriter out = response.getWriter();
if (username.equals("admin")) {
out.write("false");
} else {
out.write("true");
}
out.flush();
out.close();
}
三、运行结果
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营