通过ajax验证后,表单再提交

通过ajax验证后,表单再提交。
注意:
(1)html中的form不能使用submit,而要使用button,
(2)同时button 的id和name不能是‘submit’,否则也会失败。
(3)form需要一个id(例如id=”formid”),方便在ajax中找到对应的表单。

表单中的代码
   <form action="{% url 'App:login' %}" method="post" id="formid">
        {% csrf_token %}
        <div class="row">
            <div class="col-md-6"></div>

            <div class="col-md-4">
                <span><h2>登录</h2></span>
                <div class="form-group  required">
                    <label class="control-label" for="name">用户名</label>
                    <input class="form-control" id="name" maxlength="10" name="name"
                           placeholder="请输入用户名" required type="text" value="">
                </div>

                <div class="form-group required">
                    <label class="control-label" for="password">密码</label>
                    <input class="form-control" id="password" maxlength="16" name="password"
                           placeholder="请输入密码" required type="password" value="">
                </div>

                <input class="btn btn-default" id="button" name="button" type="button" value="登录"
                       onclick= "checkfunction()">

            </div>
        </div>
    </form>

form中点击提交button后,会触发函数 checkfunction(),通过ajax把数据提交到check_login视图函数中进行检验,并返回json数据。如果返回的是200,就执行document.getElementById(‘formid’).submit() 实现提交表单。表单提交的到login视图函数保存数据到数据库。

ajax中的代码
function checkfunction() {
$.post({% url 'App:check_login' %}, {
                "username": usernamenode.val(),
                'userpassword': userpasswordnode.val()
            }, function (data, status) {
                console.log(data.code, status);
                if (data.code == 200) {
                    alert('登陆成功');
                    document.getElementById('formid').submit()
                    {# window.location.href='/' #}
                }

                else if (data.code == 404) {
                    alert("用户不存在")
                }
                else{
                    alert("请输入正确的密码")
                    }
            })
            }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,这是一个非常常见的问题。提交表单前进行 Ajax 验证的主要目的是为了在客户端验证表单数据的有效性,以避免不必要的服务器端请求和响应。这可以提高用户体验和减轻服务器压力。下面是一个简单的示例: 1. 在 HTML 表单中添加一个 id,例如 "myForm"。 ``` <form id="myForm" method="post" action="submit.php"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">提交</button> </form> ``` 2. 在 JavaScript 中使用 jQuery 库,绑定表单提交事件,阻止默认行为,并发送 Ajax 请求。 ``` $(document).ready(function() { $('#myForm').submit(function(e) { e.preventDefault(); // 阻止表单默认提交行为 var username = $('input[name="username"]').val(); var password = $('input[name="password"]').val(); $.ajax({ url: 'validate.php', type: 'post', data: { username: username, password: password }, success: function(response) { if (response == 'valid') { $('#myForm').unbind('submit').submit(); // 取消表单提交事件绑定并重新提交 } else { alert('请检查您的用户名和密码!'); } } }); }); }); ``` 3. 在服务器端 PHP 脚本中处理 Ajax 请求,验证表单数据的有效性,并返回相应的结果。 ``` <?php $username = $_POST['username']; $password = $_POST['password']; if ($username == 'admin' && $password == 'password') { echo 'valid'; } else { echo 'invalid'; } ?> ``` 这是一个简单的示例,你可以根据你的具体需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值