Ajax——ajax调用数据总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax——ajax调用数据总结相关的知识,希望对你有一定的参考价值。

        在做人事系统加入批量改动的功能中,须要将前台中的数据传给后台。后台并运行一系列的操作。

通过查询和学习了解到能够通过ajax将值传入到后台,并在后台对数据进行操作。

        说的简单点。就是ajax调用后台的方法。通过学习和实践。学习了几种ajax调用数据的几种形式,如今总结一下:

1.  Ajax调用无參的后台方法的数据

Jquery前台代码:

       //ajax调用无參数后台方法
        $(function () {
            $("#btnok").click(function () {
                $.ajax({
                    type:"post",        //ajax的方式为post(get方式对传送数据长度有限制)
                    url: "demo.aspx/Hello",         //demo.aspx为目标文件,Hello为目标文件里的方法
                    contentType: "application/json",        //传值方式
                    success: function (data) {      //成功回传值后触发的方法
                        alert(data.d);          //后台返回的參数
                    }
                })
            })
        });

前台表单控件:

        <input id="btnok" type="button" value="单击返回hello" />

后台代码:

        //ajax调用的无參数方法
        [WebMethod]
        public static string Hello()
        {
            return "Hello Ajax!";
        }
执行结果:

技术分享


2.  Ajax调用有參后台方法中的数据

Jquery前台代码:

       //ajax调用有參数后台方法
        $(function () {
            $("#btnName").click(function () {
                var strname = $("#txtName").val();   //strname获得文本框中输入的值
                $.ajax({
                    type: "post",  //ajax的方式为post(get方式对传送数据长度有限制)
                    contentType: "application/json",        //传值方式
                    url: "demo.aspx/getName",  //demo.aspx为目标文件,getName为目标文件里的方法
                    data: "{strName:‘" + strname + "‘}",  //strName为后台方法的參数,strname为文本框中输入的值
                    contentType: "application/json",        //传值方式
                    success: function (result) {      //成功回传值后触发的方法
                        alert(result.d);          //后台返回的參数
                    }
                })
            })
        });

前台表单控件:

            <input id="txtName" type="text" /><input id="btnName" type="button" value="确定" />

后台代码:

        //ajax调用的带參数的方法         
        [WebMethod]       
        public static string getName(string strName)
        {
            return "欢迎"+strName;
        }

执行结果:

技术分享


3.  Ajax调用后台方法返回数组的数据

Jquery前台代码:

      //ajax调用后台方法返回数组
        $(function () {
            $("#btnReArr").click(function () {
                $.ajax({
                    type: "post",  //ajax的方式为post(get方式对传送数据长度有限制)
                    contentType: "application/json",        //传值方式
                    url: "demo.aspx/GetArray",  //demo.aspx为目标文件,GetArray为目标文件里的方法
                    contentType: "application/json",        //传值方式
                    success: function (result) {      //成功回传值后触发的方法
                        alert(result.d);          //后台返回的參数
                    }
                })
            })
        });

前台表单控件:

            <input id="btnReArr" type="button" value="单击返回数组" />

后台代码:

       //ajax调用返回数组的方法
        [WebMethod]
        public static List<string> GetArray()
        {
            List<string> li = new List<string>();
            for (int i = 0; i < 10; i++)
                li.Add(i + "");
            return li;
        }    

执行结果:

技术分享



4.  Ajax调用xml中的数据

Jquery前台代码:

     //ajax调用xml中的数据
        $(function () {
            $("#btnMaXML").click(function () {
                $.ajax({
                    dataType: ‘xml‘,  //ajax的方式为post(get方式对传送数据长度有限制)
                    url: "demoXML.xml",   //直接写xml的名字
                    success: function (xml) {      //成功回传值后触发的方法
                        //查找xml元素      
                        $(xml).find("data>item").each(function () {
                            var $dm = $(this);
                            var $id = $dm.find("id");   //获取出id字段的值
                            var $class = $dm.find("class");//获取出class字段的值
                            alert($id.text()+","+$class.text());   
                        })
                    }
                })
            })
        });

前台表单控件:

            <input id="btnMaXML" type="button" value="单击返回xml中数据" />

xml代码:

<?xml version="1.0" encoding="utf-8" ?

> <data> <item> <id>1</id> <class>语文</class> </item> <item> <id>2</id> <class>数学</class> </item> </data>


执行结果:

技术分享技术分享

        

       对于利用ajax调用后台的方法,也有一定的局限性。由于他的后台方法是静态的,所以在方法中利用表单中的控件就有一定的困难。可是这样的从前台传值到后台的方法比較简单也更易于理解。

                        (免费送上自己写的源代码地址:http://download.csdn.net/detail/suneqing/7265593










以上是关于Ajax——ajax调用数据总结的主要内容,如果未能解决你的问题,请参考以下文章

链接中的 URL 片段和 JSF 中的 ajax 重定向

html 输入类型提交通常在单击时重新加载页面。此片段使输入不重新加载页面以便进行ajax调用

使用 Jquery 的同步“Ajax”调用似乎不起作用

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX调用完成后的消息提示框

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]