登录和注册实现的多种方法

最新推荐文章于 2024-11-28 19:08:48 发布

原创最新推荐文章于 2024-11-28 19:08:48 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

Web API 同时被 2 个专栏收录

2 篇文章

订阅专栏

Html

1 篇文章

订阅专栏

本文介绍了使用Web API进行登录和注册的实现方法，包括通过form表单提交数据以及不使用form表单而是利用ajax调用API的方式。重点在于如何配置form属性以及Web API的交互细节。

登录和注册的实现

使用Web API实现登录和注册
- - 登录界面的实现
  - - - 使用form提交数据
        Web API
        不使用from表单提交

使用Web API实现登录和注册

登录界面的实现

使用form提交数据

要想实现登录和注册，最重要的是将数据传到Web API中，而form表单要想提交到Web API中，就要讲form的属性action设置为指定的接口地址，还需将method属性设置为指定的类型（Get或Post）,还需要将enctype属性设置为application/x-www-form-urlencoded

      <from id="admininfo" method="post" action="http://localhost:61999/api/admin/login" enctype="application/x-www-form-urlencoded">
            <br /><br />
            用户名：<input type="text" name="Adminname"/>
            <br /><br /><br /><br />
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="Adminpwd"/>
            <br /><br /><br /><br />
            <input type="submit" value="登录" class="loginbtn" />
            <br /><br />
        </from>

Web API

web api具体怎么写，上一篇文章中已经详细介绍了

        [HttpPost]
        [Route("api/admin/login")]
        public IHttpActionResult Login([FromBody]Admin admin)
        {
            var list = db.Admin.Where(a => a.Adminname == admin.Adminname && a.Adminpwd == admin.Adminpwd).ToList();
            if (list.Count() > 0)
            {
                return Json(new { code=1});
            }
            else
            {
                return Json(new { code = 0 });
            }
        }

不使用from表单提交

web api跟上边的一样，只需要将ajax的提交地址改一下就可以了
html代码

<div class="loginbody">
            <br /><br />
            用户名：<input type="text" class="Adminname"/>
            <br /><br /><br /><br />
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" class="Adminpwd"/>
            <br /><br /><br /><br />
            <button class="loginbtn">登录</button>
            <br /><br />
 </div>

js代码

<script type="text/javascript">
        $(function () {
            $(".loginbtn").click(function () {
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:61999/api/admin/login',
                    data: {Adminname:$(".Adminname").val(),Adminpwd:$(".Adminpwd").val()},
                    success: function (res) {
                        if (res.data.code == 1) {
                            alert("成功")
                        }
                    }
                })
            })
        })
    </script>