AJAX的学习

一、ajax简介
ajax即Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
一般网页信息更新要重载整个网页，但是ajax可以只重载部分，比较灵活。
ajax可以看作Web端的“子弹时间”，在用户输入数据的一瞬间，调用后台或ajax中的程序直接对数据进行简单处理，显示。
二、JQuery
jQuery是一个快速、简洁的JavaScript框架。可以创建AJAX无刷新网页。
三、ajax
type: 请求方式（post或get）默认为get。
方式post传输大量数据或表格时使用，提交数据的。
方式get数据要经过encodeURIComponent方法处理。通过简单的输入数据获取后台数据。
data: 一般的数据就直接{名称：值，}，提交给url中的方法
url:一个后台的方法，将数据输入到这个方法进行处理。
dataType: 收到的数据格式。
contentType: 发送的数据类型。
success：请求成功后的处理。
…
四、ajax使用（MVC+EF）
1.输入账号密码的表（使用之前的登录模型，加个写错误信息的）

<form id="loginform" class="form-horizontal" role="form" method="post">
    <div class="form-group">
        <label class="col-sm-2 control-label">账号</label>
        <div class="col-sm-10">
            <input type="text" class="form-control Login-Input" id="txtLogin">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input class="form-control Login-Input" id="txtPwd" type="password">
        </div>
    </div> 
    <div height="35" colspan="3">
        <label id="errorMsg" style="color: red;margin-left:20px"></label>
    </div>
    <div class="form-group">
        <div>            
            <input type="button" value="登 录" class="btn" onclick="login()">
        </div>
    </div>
</form>

2.登录判断（以前是在后台判断的，现在用ajax，直接调用）
2.1新建一个存储判断数据的类

 public class Message
    {
        private string _msg;
        public string Msg
        {
            get
            {
                return _msg;
            }
            set
            {
                _msg = value;
            }
        }
        private bool _success;
        public bool Success
        {
            get
            {
                return _success;
            }
            set
            {
                _success = value;
            }
        }
    }

2.2判断登录的方法（假定前台会使用Json格式数据传输到后台，该引用的引用一下）

[HttpPost]
        public JsonResult Login(string form)
        {
            var dt = JsonConvert.DeserializeObject<DataTable>(form);
            Message message = new Message();
            string login = dt.Rows[0]["login"].ToString();
            string pwd = dt.Rows[0]["pwd"].ToString();
            pwd = MD5(pwd);        
            using (XUEXIEntities Conn = new XUEXIEntities())
            {
                var Isvalid = (from c in Conn.TESTs
                               where c.LoginId == login && c.PassWord == pwd
                               select c.IsValid).FirstOrDefault();                
                if (Isvalid)
                {
                    message.Msg = "登录成功";
                    message.Success = true;                  
                }
                else
                {
                    message.Msg = "请输入账号";
                    message.Success = false;                    
                }
                return Json(message, JsonRequestBehavior.AllowGet);
            }
        } 

数据库还是之前的数据库，同样EF，MD5就是之前的16位大写加密（顺便把valid改对了）。
3.使用ajax
ajax会在登录被点击的时候触发。

<script>
    function login() {
        var login = $('#txtLogin').val();
        var pwd = $('#txtPwd').val();
        if (login === '')
        {
            $('#errorMsg').text('请输入账号！');
            return;
        }
        if (pwd === '')
        {
            $('#errorMsg').text('请输入密码！');
            return;
        }
        var formData = [
            {
                login: login,
                pwd: pwd,
            }
        ];
        var param =
        {
            'form': JSON.stringify(formData)
        };
        $.ajax({
            type: "POST",
            data: JSON.stringify(param),
            url: "@Url.Action("Login","Home")",//调用后台方法
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data)
            {
                if (data.Success)
                {
                    $('#errorMsg').text('');
                    location.href = '@Url.Action("MainView", "Home")';//登录成功之后的页面
                }
                else
                {
                    $('#errorMsg').text(data.Msg);//返回错误信息
                    return false;
                }
            }
        });
    }
</script>

这样就可以简单的完成ajax的使用。