关于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: