博主
258
258
258
258
标签
Vue3 springboot elasticsearch linux jdk centos docker vmware kibana
专辑

第二十节 JQuery的基本使用

亮子 2023-10-24 01:25:55 783 0 0 0

1、引入

  • 本地引入
    <script src="assets/libs/jquery/dist/jquery.min.js"></script>
  • cdn引入
<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>