通过简单的ajax验证是否存在已有的用户名

首先来说说我对ajax的理解：简单地来说就是在不重新刷新页面的情况下，实现数据的调用获得更新。

我在这里介绍的是要过jquery封装好的ajax，大家可以去了解一下使用原生的XMLHttpRequest对象请求的知识点。

ajax的各种参数老是记不全，这次也来记录一下几个常用的。

1.url：发送请求的地址

2.type：要求为String类型的参数，请求方式（get/post）默认情况下是get。注意其他Http请求也可，例如put、delete等，但是要根据浏览器是否支持

3.timeout：设置请求超时的时长

4.async：是否为异步请求，默认设置为true，如果需要设未同步请求，修改为false即可

5.cache：默认true，false表示将不会从浏览器缓存中加载信息

6.daa：要求为Object或String类型的参数。发送到服务器的数据，如果不是字符串，将自动转换为字符串格式。

7.dataType：预期服务器返回回来的数据类型。可用类型：html(纯文本html信息)、xml、json、jsonp、text(返回纯文本字符串)

8.success：要求为Function()类型的参数，请求成功后调用的回调函数，存在两个参数。

（1）由服务器返回，根据dataType参数进行处理后的数据

（2）描述状态的字符串

function(data,textStatus){

　　data可以是html、text等

}

9.error：要求为Function()类型的参数，请求失败后调用的回调函数

该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

下面进入正题。

js部分代码：

msg接收后台传递的字符串数据，通过html的形式在客户端进行显示

 <sctipt type="text/javascript">
     $.ajax({
         type:"post",
         url:"/Teachers/AjaxCheckLoginName",
         dataType:"html",
         data:"teaName="+$("#TeacherLoginName").val(),
         async:true,
         beforedSend:function(XMLHttpRequest){
             $("#showResult").text("正在查询...")

         },
         success:function(msg){
         $("#showResult").html(msg);
         $("#showResult").css("color","red")
         }
     });
 </script>        

这里使用ajax前你可以引用jquery3.4.1或者其他版本。

html部分代码（ASP.NET MVC视图）：

 <label>账号</label>
     @Html.TextBox("TeacherLoginName", null, new { @class = "form-control", type = "text", placeholder = "请输入账号" })
     <input type="button" id="btn" value="查看此账号是否存在" onclick="IsFindTeaLoginName()" />
     <div id="showResult" style="float:left"></div>
     <br />

后台代码部分（控制器）：

在后台定义返回值为string类型的方法，通过参数的形式接受ajax传递过来的文本框参数，拿到之后去数据库比较，存在就return一个字符

否则，就return "可以使用" 的字符串

 public string AjaxCheckLoginName(string teaName)
         {
             if (db.Teacher.Where(t => t.TeacherLoginName == teaName).ToList().Count > )
             {
                 //Response.Write("");
                 return "用户名已经存在！";
             }
             else
             {
                 //Response.Write("");
                 if (teaName=="")
                 {
                     return "请输入一个账号...";
                 }
                 else
                 {
                     return "您可以使用此用户名！";
                 }

             }
         }