ASP.NET中阻止form表单提交后跳转网页的方法

最新推荐文章于 2022-01-15 16:24:44 发布

HerryDong

最新推荐文章于 2022-01-15 16:24:44 发布

阅读量1.8k

点赞数

分类专栏： ASP.NET 文章标签： ASP.NET Form表单网页跳转 ashx

本文链接：https://blog.csdn.net/HerryDong/article/details/100747806

版权

ASP.NET 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

大家都知道form表单提交之后网页就跳转了，然而在很多时候我们不希望网页跳转，这时有同志提出：利用div替换form，然后ajax提交就可以了。这样做功能当然是能够实现的，但填写完后按回车键就没反应了…对于我这样的半吊子前端来说，多写一点js代码都是痛苦万分，还好form有一个onsubmit事件，可以完美解决问题。
html代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>用户登录</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url(Images/bg.jfif) no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        form
        {
            width: 400px;
            margin: 200px auto;
            padding: 20px 30px;
            background-color: rgba(255, 255, 255, 0.8);
        }

            form div
            {
                margin-bottom:10px;
            }

        a:link, a:visited, a:hover, a:active
        {
            text-decoration: none;
            color: rgba(0, 0, 0, 0.5);
        }
    </style>
    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/popper.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <form action="Handlers/LoginHandler.ashx" method="post" onsubmit="return login()">
            <div style="margin-bottom:20px;">
                <h2 style="text-align:center;">用户登录</h2>
            </div>
            <div class="form-group has-success has-feedback">
                <input type="text" class="form-control" id="username" placeholder="用户名">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-success has-feedback">
                <input type="password" class="form-control" id="password" placeholder="密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input" value=""><span style="font-size:15px;">记住我</span>
                </label>
            </div>
            <div>
                <button type="submit" class="btn btn-primary btn-block">登录</button>
            </div>
            <div>
                <a href="#" style="display:inline;font-size:15px;">还未注册</a>
                <a href="#" style="display:inline;font-size:15px;margin-left:185px;">忘记密码？</a>
            </div>
        </form>
    </div>

    <script>
        function login()
        {
            var username = $('#username').val();
            var password = $('#password').val();
            if (username == '' || password == '')
            {
                alert('用户名和密码不能为空');
                return false;
            }

            $.ajax({
                url: 'Handlers/LoginHandler.ashx',
                type: 'post',
                dataType: 'json',
                data: { username: username, password: password },
                success: function (data)
                {
                    if (data == 'Yes')
                    {
                        window.location.href = 'index.html';
                    }
                    else
                    {
                        alert('用户名或密码错误');
                    }
                }
            });

            return false;
        }
    </script>
</body>
</html>

LoginHandler.ashx代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication1.Handlers
{
    /// <summary>
    /// LoginHandler 的摘要说明
    /// </summary>
    public class LoginHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string userName = context.Request["username"].ToString();
            string password = context.Request["password"].ToString();
            if (userName == "admin" && password == "1")
            {
                context.Response.Write(JsonConvert.SerializeObject("Yes"));
            }
            else
            {
                context.Response.Write(JsonConvert.SerializeObject("No"));
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

问题解决！

HerryDong

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET中阻止form表单提交后跳转网页的方法

大家都知道form表单提交之后网页就跳转了，然而在很多时候我们不希望网页跳转，这时有同志提出：利用div替换form，然后ajax提交就可以了。这样做功能当然是能够实现的，但填写完后按回车键就没反应了…对于我这样的半吊子前端来说，多写一点js代码都是痛苦万分，还好form有一个onsubmit事件，可以完美解决问题。html代码<!DOCTYPE html><html&gt...
复制链接

扫一扫