关于a标签发起Ajax请求的问题

Alfred_SAMA

已于 2023-01-13 13:46:13 修改

阅读量947

点赞数

文章标签： ajax javascript 前端

于 2022-06-25 10:23:45 首次发布

本文链接：https://blog.csdn.net/weixin_45457042/article/details/125456168

版权

适用场景

在列表页中需要对其中的一条数据进行操作的时候使用该方式，也不排除一些其他的方式。

前端代码

相关JS下载地址

https://code.jquery.com/jquery-3.6.0.min.js

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        {% for i in video %}
            <a href="javascript:void(0);" aria-valuetext="{{ i.topic_id }}" class="a_post">{{ i.content }}</a>
        {% endfor %}
    </div>

    <script>

        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });
        $('.a_post').on('click',function (envent) {
            envent.preventDefault();
            //var href = $(this).attr("href");
            var num = $(this).attr("aria-valuetext");
            $.ajax({
                type : 'POST',
                url : '上传路由',
                data : { ids : num},
                dataType : 'json',
                success : function (data) {
                    if (data.status === 'success') {
                        layer.msg(data['text'], function () {
                             location.reload()
                        })
                    } else if (data.status === 'fail') {
                        layer.msg(data['text']);
                    } else if (data.status === 'fails') {
                        layer.msg(data['text']);
                    }
                },
                error : function (data) {

                }
            })
        })
    </script>
</body>
</html>

回车键提交问题

<form role="form" action="" method="post" class="registration-form">
	<div class="form-group">
		<label class="sr-only" for="form-first-name">First name</label>
		<input type="text" name="name" placeholder="用户名..." class="form-first-name form-control" id="form-first-name">
	</div>
	<div class="form-group">
		<label class="sr-only" for="form-email">Email</label>
		<input type="password" name="pwd" placeholder="密码..." class="form-email form-control" id="pwd" style="height: 50px;">
        <input type="hidden" id="redirect" value="{{ urls }}">
	</div>
    <button type="button" class="btn" id="btn"
            onKeyPress="if(event.keyCode==13){ javascript:btnSub()}">登录
    </button>
</form>

<script>
    var token = "{{ csrf_token }}"
    $.ajaxSetup({
        headers: {'X-CSRFTOKEN': `${token}`}, // 这里是headers，不是data
    });
</script>

<script>
    document.onkeydown = function (e) {
        if (e.keyCode == 13) {
            var username = $('#form-first-name').val();
            var pwd = $('#pwd').val();
            var redirect = $('#redirect').val();
            $.ajax({
                type: 'POST',
                url: '/base/login/',
                data: {
                    'username': username,
                    'redirect': redirect,
                    'pwd': pwd,
                },
                headers: {'X-CSRFTOKEN': `${token}`},
                dataType: 'JSON',
                success: function (data) {
                    if (data['code'] == 400) {
                        layer.msg(data['state']);
                    } else if (data['code'] == 200) {
                        layer.msg(data['state']);
                        window.setTimeout(function () {
                            location.href = data['urls'];
                        }, 2000)
                    }
                }
            })
        }
    }
</script>