版权声明：本文为大都督作者的原创文章，未经 大都督 允许也可以转载，但请注明出处，谢谢！ 共勉！ https://blog.csdn.net/qq_37335220/article/details/85851580
1.效果图
1.1 /jquery/jquery_ajax 路径下
1.2 使用 名称: 大都督, 密码: 123456，点击登录后
2.HTML代码
2.1 jquery_ajax.html页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>62 jQuery-使用ajax（）方法发送请求</title>
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;}
.divFrame .divContent{padding:8px}
.divFrame .divContent .clsShow{font-size:14px}
.btn {border:#666 1px solid;padding:2px;width:80px;
filter: progid:DXImageTransform.Microsoft
.Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
</style>
</head>
<body>
<form id="frmUserLogin"></form>
<script src="../../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//请求登录页
$.ajax({
url: "/jquery/login",
dataType: "html",
success: function(HTML) {//返回页面内容
//将页面内容置入表单中
$("#frmUserLogin").html(HTML);
//登录按钮单击事件
$("#btnLogin").click(function(){
//获取用户名称
var strTxtName = $("#txtName").val();
//获取输入密码
var strTxtPass = $("#txtPass").val();
//开始发送请求
$.ajax({//请求登录页处理
url: "/jquery/confirm_login",
dataType: "html",
data: {txtName: strTxtName, txtPass: strTxtPass},//传送请求数据
success: function(strValue) {//登录成功后返回的数据
$(".clsShow").html(strValue);
},
error: function(XMLHttpRequest, strError, strObj) {
console.log("XMLHttpRequest:"+XMLHttpRequest);
console.log("strError:"+strError);
console.log("strObj:"+strObj);
}
})
})
}
})
})
</script>
</body>
</html>
2.2 login.html页面代码
<div class="divFrame">
<div class="divTitle">
<span>用户登录</span>
</div>
<div class="divContent">
<div class="clsShow">
<div id="divError" class="clsError">
</div>
<div>
名称：<input id="txtName" type="text" class="txt" />
</div>
<div style="margin-top:10px;">
密码：<input id="txtPass" type="password" class="txt" />
</div>
<div style="margin-top:10px;">
<input id="btnLogin" type="button" value="登录" class="btn" />
<input id="btnReset" type="reset" value="取消" class="btn" />
</div>
</div>
</div>
</div>
3.Java代码
package com.example.demo.manager;
import java.util.Map;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @Description jquery控制层
* @author 大都督
* @date 2019年1月3日
*/
@Controller
@RequestMapping("/jquery")
public class JqueryManager extends BaseManager{
/**
*
* @Title: confirmLogin
* @Description:对用户名和密码进行验证
* @param txtName
* @param txtPass
* @return
* @author 大都督
* @date 2019年1月5日
* @return String
*/
@RequestMapping("/confirm_login")
@ResponseBody
public String confirmLogin(String txtName, String txtPass) {
System.out.println("txtName:"+txtName+" txtPass:"+txtPass);
if (StringUtils.equals(txtPass, "123456") && StringUtils.equals(txtName, "大都督")) {
return "操作提示，登录成功！";
}
return "用户名或密码错误！";
}
/**
*
* @Title: login
* @Description:获取login.html页面
* @return
* @author 大都督
* @date 2019年1月5日
* @return String
*/
@RequestMapping("/login")
public String login() {
return "jquery/testFile/login";
}
/**
*
* @Title: jqueryAjax
* @Description:跳转到jquery_ajax页面
* @return
* @author 大都督
* @date 2019年1月5日
* @return String
*/
@RequestMapping("/jquery_ajax")
public String jqueryAjax() {
return "jquery/ajax/jquery_ajax";
}
}