asp.net中Jquery调用Ajax与asp.net MVC框架中Jquery调用Ajax 总结

最新推荐文章于 2021-08-05 13:53:21 发布

haojuntu

最新推荐文章于 2021-08-05 13:53:21 发布

阅读量6.2k

点赞数

分类专栏： Web后端文章标签： ajax AJAX Ajax asp.net ASP.NET Asp.Net ASP.Net Asp.net jquery jQuery JQUERY Jquery JQuery mvc MVC 设计模式

本文链接：https://blog.csdn.net/haojuntu/article/details/8053666

版权

Web后端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以前使用的是js的XMLHttpRequest实现的无刷新技术，最近参考网上整理了一下用Jquery调用Ajax方法，对于熟悉Jquery的人来说是比较容易的，而对于不熟悉的人来说比较困难，闲话少说，看代码

一、asp.net中Jquery调用Ajax

前台代码MyAjax1.aspx为页面名称，AddUsers为后台方法名称

 <head runat="server">
    <title>添加用户</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        用户名：
        <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="添加用户" οnclick="Button1_Click" />
    </div>
    </form>
    <script language="javascript" type="text/javascript">
        $(function () {
            $('#UserName').blur(MyAjax);
        });
        function MyAjax() {
            $.ajax({
                //需要使用post提交
                type: "post",
                contentType: "application/json",
                url: "MyAjax1.aspx/AddUsers",
                data: "{ uname: '" + $('#UserName').val() + "' }",
                dataType: 'json',
                success: function (e) {
                    alert(e.d);//返回json格式
                },
                error: function (err) {
                    alert(err);
                }
            });
        }
    </script>
</body>

后台代码

using System.Web.Services;//需要引用命名空间

namespace MyWebAjax
{
    public partial class MyAjax1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]//方法需要为静态、并且有WebMethod标识
        public static string AddUsers(string uname)
        {
            string result=string.Empty;
            if (string.IsNullOrEmpty(uname))
                result = "用户名不能为空!";
            bool b = Data.IsExist(uname);
            if (!b)
                result = "用户名可以使用!";
            else
                result = "用户名已存在!";
            return result;
        }
    }
}

二、asp.net MVC设计模式中Jquery调用Ajax

前台代码

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.4.1-vsdoc.js" ></script>
    <%
        var mess = "";
        switch ((string)ViewData["Message"])
        {
            case "1":
                mess = "用户名已存在！";
                break;
            case "2":
                mess = "用户添加成功！";
                break;
            case "3":
                mess = "用户名不能为空！";
                break;
        }
    %>
    <h2>
        <%=mess%>
    </h2>
    <%Html.BeginForm("AddUser", "User"); %>
    <%=Html.Label("用户名：") %>
    <%=Html.TextBox("UserName") %>
    <input name="btnSubmit" type="submit" value="添加用户" />
    <%Html.EndForm(); %>
    <script type="text/javascript" language="javascript">
        $(function () {
            $('#UserName').blur(MyAjax);
        });
        function MyAjax() {
            $.ajax({
                type: "POST",  //默认是GET
                url: "/Ajax/AddUsers", //Ajax为Controller名称、AddUsers为Action名称
                data: "uname='" + $('#UserName').val() + "'",
                async: true,  //异步
                cache: false, //不加载缓存
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("请求失败");
                }
            });

    }
    </script>
</asp:Content>

后台代码，下面加红色的地方需要注意，名称需要和前台传入的一样，例如uname

using System.Web.Services;

namespace MyAjax.Controllers
{
    public class AjaxController : Controller
    {
        //
        // GET: /Ajax/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AddUsers(string uname)
        {
            string result = string.Empty;
            if (Request.IsAjaxRequest())
            {
                if (string.IsNullOrEmpty(uname))
                    result = "用户名不能为空!";
                bool b = Data.IsExist(uname);
                if (!b)
                    result = "用户名可以使用!";
                else
                    result = "用户名已存在!";
            }
            return Content(result);
        }

    }

希望对需要的人有所帮助！

haojuntu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
asp.net中Jquery调用Ajax与asp.net MVC框架中Jquery调用Ajax 总结

以前使用的是js的XMLHttpRequest实现的无刷新技术，最近参考网上整理了一下用Jquery调用Ajax方法，对于熟悉Jquery的人来说是比较容易的，而对于不熟悉的人来说比较困难，闲话少说，看代码一、asp.net中Jquery调用Ajax 前台代码MyAjax1.aspx为页面名称，AddUsers为后台方法名称添加用户
复制链接

扫一扫