ajax简介:
简单的实现界面:
代码实现:
1、创建MVC项目
2、Models下创建一个类文件(Major.cs)
Major.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace checkuser.Models
{
public class Major
{
public string username { get; set; } //用户名
public string password { get; set; } //密码
}
}
3、HomeController.cs
using checkuser.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace checkuser.Controllers
{
public class HomeController : Controller
{
public string Islegal(string dept)
{
List<Major> major = new List<Major>();
major.Add(new Major() { username = "222", password = "123" });
major.Add(new Major() { username = "admin", password = "111" });
//List<string> major = new List<string>();
//major.Add("admin");
//major.Add("111");
if (dept == "")
return "1";
for(var i=0;i<major.Count;i++)
{
if(major[i].username.Equals(dept))
{
return "false";
}
}
return "true";
}
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
4、index.cshtml
<form action="AjaxDemo1" method="post">
<br />
用户名:<input type="text" id="username" placeholder="请输入用户名" /><span id="check"></span><br /><br />
密 码:<input type="password" id="password"
name="password" /><br />
</form>
<button class="btn btn-default" value="submit" style="margin-left:100px;margin-top:10px;float:left">注册</button>
@section scripts {
<script>
$(document).ready(function () {
$("#username").keyup(function () {
$.ajax({
type: "get", //到后台服务器端的方式
url: "/Home/Islegal",//路径
data: { "dept": $(this).val() },
dataType: "text",//data类型
async: false,
success: function (msg) {//回调函数
//接收并处理服务端返回来的数据
if (msg=="true") {
$("#check").css("color", "green").html("恭喜!该用户名可用!");
}
else if (msg == "1") {
$("#check").css("color", "blue").html("用户名不可以为空!");
}
else {
$("#check").css("color", "red").html("该用户名已被使用!请重新输入");
}
}
});
}); //end change
});
</script>
}
完成以上步骤即可完成用户名同步校验,希望对大家有帮助!