MVC中Ajax实现异步无刷新请求---校验表单字段- element ui

关于Ajax的介绍和分析,请看我之前写的文章在Jquery和JavaScript分栏中。

案例;在表单页面中,输入用户姓名,进行异步校验
采用Ajax异步处理,向服务器端发送请求,然后服务器端响应返回数据给客户端。
根据服务器端返回结果,在前台进行处理。

数据表UserInfos：
在这里插入图片描述

1.准备实体类:

using System;
using System.Data;
using System.Collections.Generic;
namespace MVC_Project07.Models {
    public class UserInfos
    {
        public int UserId { get; set; }
        public string UserName { get; set; }
        public string PassWord { get; set; }
        public string Telephone { get; set; }
        public DateTime Birthday { get; set; }
        public DateTime CreateTime { get; set; }
        public int TypeId { get; set; }
        public string Remark { get; set; }
        public int ImageIndex { get; set; }
        public string Email { get; set; }
        public string Hobbies { get; set; }
        public string City { get; set; }
        public string Gender { get; set; }
    }
}

添加Controller:

using System.Web.Mvc;
using System.Data.SqlClient;
using MVC_Project07.Common;
using MVC_Project07.Models;
using Newtonsoft.Json;

namespace MVC_Project07.Controllers
{
    public class UserController : Controller
    {

	 // GET: User
        public ActionResult Index()
        {
            return View();
        }		
	
	 public string CheckUserName(string username2)
        {
            var username = Request["username"];
            if (username != null)
            {
                string sql = @"SELECT COUNT(username) FROM UserInfos 
                WHERE username=@username";
                SqlParameter[] parameters = new SqlParameter[] {
                new SqlParameter("@username",username)
            };
                int count = (int)DBHelper.ExecuteScalar(sql, parameters);
                if (count > 0)//用户名已存在
                {
                    return "" + count;//将数据返回给客户端
                }
            }
            return "";//不存在,将空字符串返回给客户端
        }
    }
}

View页面:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>用户注册页面</title>
<style>
.wrong {
  color:red;
}
.correct {
color:green;
}
</style>
@*引入JQuery类库*@
<script src="~/JS/jquery.min.js"></script>
<script>
$(function () {
  $("#username").on("blur", function () {
      debugger;

      var userNameElement = $(this);
      var userNameVal = $(this).val();

      //发送ajax异步请求
      $.ajax({
           //type: "POST",
          //url: "/User/Register",
          //data: {username: userNameVal},
          type:"GET",
          //url: "/User/CheckUserName?username=" + userNameVal,
          url: "/User/CheckUserName",  //去调用User控制器下的CheckUserName动作方法
          data: {username: userNameVal},
          dataType: "text",
          //async: true,
          success: function (data, textStatus) {//请求成功,data接收服务端响应数据
              debugger;
              console.log(data);
              console.log(textStatus);
              var validateEle = userNameElement.siblings("span").eq(0);
              if (data != "") {//用户名已存在
                  validateEle.removeClass("correct");
                  validateEle.addClass("wrong");
                  validateEle.html("用户名已存在!");
              } else {
                  validateEle.removeClass("wrong");
                  validateEle.addClass("correct");
                  validateEle.html("用户名不存在!");
              }
          },
          error: function (XMLHttpRequest, strError, strObject) {
              debugger;
              console.log(strError);
          }
      });
  });
});

</script>
</head>
<body>
<div> 
<form action="/Home/Register">

用户名:<input  type="text" name="username" id="username"/><span></span><br/>
密码:<input  type="password" name="password" id="password"/><span></span><br />
E-mail:<input  type="text" name="email" id="email"/><span></span><br />
电话号码:<input  type="text" name="telephone" id="telephone"/><span></span><br/>    
<input type="submit"  value="提交" id="submitBtn"/> 
</form>
</div>
</body>
</html>

已存在的记录:
在这里插入图片描述
Result: