1、引入
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
2、准备函数
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$(".preloader").fadeOut();
// ==============================================================
// Login and Recover Password
// ==============================================================
$('#to-recover').on("click", function() {
$("#loginform").slideUp();
$("#recoverform").fadeIn();
});
$('#to-login').click(function(){
$("#recoverform").hide();
$("#loginform").fadeIn();
});
// Success Type
$('#btn-login').on('click', function() {
let formData = $('#loginform1').serialize()
$.post('/user/login.do', formData, function(res) {
// 处理服务器响应的回调函数
console.log(res);
if(res.code == 200) {
window.location.href="/index.do";
}
else {
let msg = res.msg;
toastr.error(msg, '错误信息');
}
});
});
});
</script>
3、表单提交
// Success Type
$('#btn-login').on('click', function() {
let formData = $('#loginform1').serialize()
$.post('/user/login.do', formData, function(res) {
// 处理服务器响应的回调函数
console.log(res);
if(res.code == 200) {
window.location.href="/index.do";
}
else {
let msg = res.msg;
toastr.error(msg, '错误信息');
}
});
});
4、对象提交
// 申请流程
function startProcess(key) {
console.log("startProcess....")
var data = {};
data.key = key;
$.post('/act/start.do', data, function(res) {
// 处理服务器响应的回调函数
console.log(res);
if(res.code == 200) {
toastr.success("申请已经提交成功", '成功信息');
}
else {
let msg = res.msg;
toastr.error(msg, '错误信息');
}
});
}
5、JSON对象提交
var data = {
name: 'John',
age: 20,
gender: 'M'
};
$.post('/api/', JSON.stringify(data), function(response) {
console.log(response);
}, 'json');
6、js引入以及绑定事件
<%--
Created by IntelliJ IDEA.
User: Admin
Date: 2023/10/7
Time: 9:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="<%=request.getContextPath()%>/login/save.do" method="post">
<input type="text" name="username" value="" id="username">
<input type="text" name="password" value="">
<input type="text" name="code" value=""><a href="javascript:;" onclick="getCode();">获取验证码</a>
<button type="submit">登录</button>
</form>
<script src="<%=request.getContextPath()%>/static/js/jquery-1.8.3.js"></script>
<script>
function getCode(){
var username = $("#username").val();
$.post("<%=request.getContextPath()%>/login/getCode.do",{
username:username
}, function (res){
alert(res.code);
});
}
</script>
</body>
</html>