码迷,mamicode.com
首页 > Web开发 > 详细

js实现post方式的异步请求

时间:2019-06-10 13:51:41      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:回调   Servle   page   write   post   type   res   this   login   

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
<script src="/ajax/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="http://www.ubfgho.com/" method="post" enctype="application/x-www-form-urlencoded">
姓名:<input type="text" name="name"><span></span><br>
密码:<input type="password" name="psw"><br>
<input type="submit" value="提交"><br>
</form>
</body>
<script>
//js实现post方式的异步请求
$(‘:text‘).blur(function () {
var name1=$(this).val().trim()
//1、创建发送异步请求的对象req
var req=XMLHttpRequest();
//2、准备发送
req.open("POST","ajax/login",true)
//3、设置请求头
req.setRequestHeader("Content-type","application/x-www-form-urlencoded")
//4、发送
req.send("name"+name1)

//回调参数
req.onreadystatechange=function () {
if (req.readyState==4&&req.status==200){
$("span").html(req.responseText).css("color","red")
}
}
})




//1、失去焦点事件--判断姓名是否为空
$(‘:text‘).blur(function () {
var v=$(this).val()
if (v.trim()==""){
$("span").html("姓名为空").css("color","red")
}else{
$("span").html("")//清空span
}
})
//2、提交事件---点击提交按钮触发submit
$("form").submit(function () {
//选中text文本
var v=$(‘:text‘).val().trim();
if (v==""){
//如果姓名为空。就返回false,阻止提交,
return false
}
})


</script>
</html>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String name=request.getParameter("name");
boolean b=dao.selectName(name);
String msg=b?"用户名已被占用":"用户名正常";
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(msg);
}


js实现post方式的异步请求

标签:回调   Servle   page   write   post   type   res   this   login   

原文地址:https://www.cnblogs.com/xiaoshenke/p/10996992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!