asp.net core mvc ajax Post提交Form表单
程序员文章站
2022-06-11 22:42:45
...
一、创建Model
using System;
namespace CalibrationFlow.Model
{
/// <summary>
/// 实体类sys_User 。(属性说明自动提取数据库字段的描述信息)
/// </summary>
public class sys_User
{
public sys_User()
{ }
public int User_ID { get; set; }
public string EID { get; set; }
public string UserName { get; set; }
public string PassWord { get; set; }
public int Role_ID { get; set; }
public int Com_ID { get; set; }
public string Email { get; set; }
public string Note { get; set; }
}
}
二、控制器中创建Action
[HttpPost]
public JsonResult Login_submit(sys_User _user)
{
return Json(_user);
}
三、创建View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>用户登陆</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<style>
body {
background: #99FF33;
}
</style>
</head>
<body>
<form id="form">
<div style="width:25%; margin:10% auto; background:#CCCCFF">
<div style="width:80%; margin:0 auto; padding-top:15px; padding-bottom:35px;">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">用户名</span>
<input type="text" class="form-control" name="UserName" id="UserName" placeholder="Username">
</div>
<div class="input-group mb-3" style="margin-top:20px;">
<span class="input-group-text" id="basic-addon1" style="width:75px;">密 码</span>
<input type="password" class="form-control" name="PassWord" id="PassWord" placeholder="Password">
</div>
<div style=" width:100%;text-align:center;margin-top:35px;">
<button type="button" id="loginbtn" class="btn btn-primary btn-sm" style="width:150px; height:35px;" onclick="login()">Login</button>
</div>
</div>
</div>
</form>
<script src="~/js/jquery-1.11.3.min.js"></script>
<script>
function login() {
$.ajax({
url: "Account/Login_submit",
type: "post",
data: $("#form").serialize(),
dataType: "json",
success: function (data) {
console.log("成功");
console.log(data);
},
error: function (e) {
console.log("系统出错！");
console.log(e.error);
}
})
}
</script>
</body>
</html>
注意：
<button type="button" id="loginbtn" class="btn btn-primary btn-sm" style="width:150px; height:35px;" onclick="login()">Login</button>
type=“button” 如果换成type=“submit” 在Action中Model中时没有数据的，而且返回Json Ajax会报错。