jQuery Ajax post数据到C#controller后台并返回数据

视图代码:

 

@Scripts.Render("~/bundles/jquery")
@{ Layout = null;}
<style>
    form {
        width: 400px;
        height: 200px;
        padding: 20px;
        background: #cca;
        border-radius: 20px;
        position: relative;
        margin: 10px auto;
        font-size: 20px;
        line-height: 20px;
    }

    input {
        padding: 10px;
        border-radius: 10px;
        margin: 10px;
        outline:none;
    }

        input[type="button"] {
            width: 100px;
            position: relative;
            left: 100px;
            font-size: 20px;
            font-weight:bold;
        }
        input[type="button"]:hover{
            background:linear-gradient(to left,#4cff00,#00ffff);
        }
</style>
<form action="" method="post">
    用户名:<input type="text" name="usr" id="usr" value="" required="" placeholder="请输入用户名"/><br />&nbsp;码:<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" /><br />
    <input type="button" name="login" id="login" value="登录" />
    <input type="button" name="button" id="getUlist" value="提交" />
</form>
<script>
    $(function () {
        $('#usr').focus();
        $('#login').click(login);
        $("#pwd").keypress(function (event) {
            console.log(event.keyCode,event.key);
            if (event.keyCode == 13) {
                login();

            }
        });

        function login() {
            if ($("#usr").val() == "") {
                alert("用户名不能为空");
                return;
            }
            if ($("#pwd").val() == "") {
                alert("密码不能为空");
                return;
            }
            var user = $("#usr").val();
            var pwd = $("#pwd").val();

            $.ajax({
                url: "/GetAndPostRequest/Login",
                type: "post",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({ "user": user, "pwd": pwd }),
                success: function (data) {
                    console.log(data.Result);
                    if (data.Result == -1) {
                        alert('登录失败')
                    }
                    else {
                        alert('登录成功')
                    }
                }
                ,
                error: function (jqXHR,textStatus,errorThrown) {
                    alert("error " + textStatus);
                }
            });
        }

        $('#getUlist').click(function () {
            $.ajax({
                url: "/GetAndPostRequest/GetUser",
                type: "post",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    console.log(typeof data[0].UAge);
                }
            });
        });
    })

</script>

 

后台控制器代码:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Diagnostics;

namespace GetAndPostRequest.Controllers
{
    public class GetAndPostRequestController : Controller
    {
        // GET: GetAndPostRequest
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult Login(string user,string pwd)
        {
            Debug.WriteLine(user + "  " + pwd);
            int result = -1;
            if(user=="admin" && pwd == "888")
            {
                result = 0;
            }
            return Json(new { Result = result }, JsonRequestBehavior.AllowGet);
        }
        
        public JsonResult GetUser()
        {
            List<Users> ulist = new List<Users> {
                new Users {Id=1,UName="张三",UAge=30,UAddress="天河区" },
                new Users {Id=2,UName="李四",UAge=33,UAddress="越秀区" },
                new Users {Id=3,UName="王五",UAge=38,UAddress="荔湾区" }
            };

            var temp = (from u in ulist
                       select u).ToList();
            return Json(temp,JsonRequestBehavior.AllowGet);
        }
    }

    public class Users
    {
        public int Id { get; set; }
        public string UName { get; set; }

        public int UAge { get; set; }

        public string UAddress { get; set; }

    }
}

 

posted @ 2016-10-30 12:51  编程-一生坚持的事业  阅读(1422)  评论(0)    收藏  举报