日期:2014-05-16  浏览次数:20836 次

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",        //传值方式
                    succes