asp.net使用Jquery基础教程

Keywords:


上文介绍了如何在asp.net中引入jquery,下面简单介绍jquery的核心语法以及调用后台的基本教程。

核心语法1:$();


    <script>
        $(function () {
            document.getElementById('h1').innerText = "hello jquery,docunment is ready";
        });
    </script>
作用是网页加载完成后执行,因此下面的脚本可放置在id为h1的元素前面。




核心语法2:事件绑定


    <script>
        $("#button1").click(function myfunction() {
            alert("hello jquery,button1 clicked");
        })
    </script>
这里面$(#name)等于docunment.getelementbyId(name),jquery获得元素的写法更简洁,同理byTag等也有各自的写法,根据Id获取元素使用的是最多的。




核心语法3:$.get()


    <!--使用Jquery调用后台1-->
    <script>
        //先绑定事件,在get数据
        $("#button2").click(function myfunction() {
            $.get("./MyHandler.ashx", function myfunction(result) {
                alert(result);
            })
        })
    </script>

    <!--使用Jquery调用后台2-->
    <script>
        $("#button3").click(function myfunction() {
            $.get("./MyWebForm.aspx", function myfunction(result) {
                alert(result);
            })
        })
    </script>

$.get()在asp.net中通常调用后台aspx程序和ashx处理程序,关于这两种程序的区别我在[这篇文章]里介绍过,我个人推荐使用ashx程序完成后台数据处理。aspx后台代码以及ashx后台代码如下:

aspx:


    public partial class MyWebForm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("yes,it(aspx) work");
            Response.End();
        }
    }
ashx:
    public class MyHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("yes,it(ashx) work");

            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }




核心语法4:使用Ajax


jquery是Javascrīpt的一种语言框架,ajax是一种技术(前后台交互),jquery可以实现ajax这种技术,使用js原生同样可以实现ajax但写法非常麻烦。下面是使用jquery的写法。我在下一篇文章中介绍ajax和jquery之间的关系。


     <!--使用AJAX请求后台-->
    <script>
        $("#button4").click(function () {
            $.ajax({
                url: "./TestAjax.aspx/ShowIsWork",
                type: "Post",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data) {
                    //返回的数据用data.d获取内容 
                    alert(data.d);
                },
                error: function (err) {
                    alert(err);
                }
            });
        });
        //更多ajax选项前往 http://api.jquery.com/jquery.ajax/
    </script>


    <!--使用AJAX带参数请求后台-->
    <script>
        $(function () {
            $("#button5").click(function () {
                $.ajax({
                    type: "Post",
                    url: "./TestAjax.aspx/GetStr",
                    //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 
                    data: "{'str':'我是参数1','str2':'我是参数2'}",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success:
                    function (data) {
                        //返回的数据用data.d获取内容 
                        alert(data.d);
                    },
                    error:
                    function (err) {
                        alert(err);
                    }
                });
            });
        });
    </script>


    <!--使用AJAX带参数请求后台2-->
    <script>
        $(function () {
            $("#button6").click(function () {
                $.ajax({
                    type:"Post",
                    url:"./TestAjax.aspx/GetList",
                    //方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字 
                    data:"{'no':8}",
                    contentType:"application/json;charset=utf-8", 
                    dataType:"json", 
                    success:
                    function (data) {
                        //插入前先清空ul 
                        $("#list").html("");
                        //递归获取数据 
                        $(data.d).each(function () {
                            //插入结果到li里面 
                            $("#list").append("<li>" +this+"</li>");
                        });
                        alert(data.d);
                    }, 
                    error:
                    function (err) {
                        alert(err);
                    }
                });
            });
        });
    </script>


请注意URL的格式,页面后面跟的是方法url: "TestAjax.aspx/GetStr",表示使用TestAjax.aspx里定义的GetStr方法。另外传入参数data中的名称应与后台参数名对应。后台代码树下:


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


        }
        [WebMethod]
        public static string ShowIsWork()
        {
            string result = "yes, it(AJAX) work";
            return result;

        }

        [WebMethod]
        public static string GetStr(string str,string str2)
        {
            return str+ str2;
        }
        [WebMethod]
        public static List<string> GetList(int no)
        {
            List<string> list = new List<string>();
            for (int i = 0; i < no; i++)
            {
                list.Add("List"+i.ToString());
            } 
            return list;
        }
    }




本文源码下载地址:

链接: https://pan.baidu.com/s/1c8m2lS 密码: wtqa


作者:songshizhao 发表于:2017-10-29T04:45:41 访问量:405