基于Jquery ajax 与 Jquery插件 Ztree使用说明

因为以前自己也摸索过jquery ajax,但是还是实际项目却用的少,开始还以为不会遇到很多问题,结果却让我头疼呵呵,大大小小的问题,让我当初有砸鼠标的问题(砸电脑的想法却没有),所以现在记点东西。

 问题1:开发环境是在VS2008上,但是得使用.NET 2.0,所以就遇到了问题,发现竟然ajax竟然不进后台的方法。

   测试
 

 代码如下 复制代码
$(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "default.aspx/HelloWord",
            dataType: "text",
            contentType: "application/json; charset=utf-8",
            beforeSend: function(XMLHttpRequest) {
                $('#show').text("正在查询");
            },
            success: function(msg) {
                alert(eval("(" + msg + ")").d);
            },
            error: function(xhr, msg, e) { alert(msg); }
        });
    });
 [System.Web.Services.WebMethod()]
 public static string HelloWord()
 {
       return "Hello Word";
  }

然后运行得到的却是:看到页面上有个JS语法错误,经过查找发现web.config文件里面缺少一段代码,所以我把这段代码拷到web.config的<system.web>节点下,然后运行成功。

 代码如下 复制代码
<httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </httpModules>

  问题2:后台返回的是JSON格式的数据,JS接收数据存为JSON数据对象。

  因为我后台取得的数据时IList<T>格式的,所以需要转换为JSON格式类型的,所以使用了网上搜到的一个方法。

 

 代码如下 复制代码

 

public static string ObjectToJson<T>(string jsonName, IList<T> IL)
    {
        StringBuilder Json = new StringBuilder();
        Json.Append("[");
        if (IL.Count > 0)
        {
            for (int i = 0; i < IL.Count; i++)
            {
                T obj = Activator.CreateInstance<T>();
                Type type = obj.GetType();
                PropertyInfo[] pis = type.GetProperties();
                Json.Append("{");
                for (int j = 0; j < pis.Length; j++)
                {
                    Json.Append(""" + pis[j].Name.ToString() + "":"" + pis[j].GetValue(IL[i], null) + """);
                    if (j < pis.Length - 1)
                    {
                        Json.Append(",");
                    }
                }
                Json.Append("}");
                if (i < IL.Count - 1)
                {
                    Json.Append(",");
                }
            }
        }
        Json.Append("]");
        return Json.ToString();
    }

前台JS

 

 代码如下 复制代码

 

$(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "programList.aspx/getClassData",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(msg) {
                alert(eval("(" + msg + ")").d);
            },
            error: function(xhr, msg, e) { alert(msg); }
        });
        // 初始化数据(显示第一页)
        onloadGrid(0);
        InitData(0, 0);
    });

运行又得到错误:JS错误缺少']',然后我用FireBug工具查看是否取到JSON值,查看得到,数据已经有响应,并且符合JSON格式而并没有缺少']', 所以我又将JS里面的dataType:text,运行后弹出数据成功。这里我真的很纳闷,不知道是我后台的转换方法不对,还是前台JS的不对,这里发一疑问,麻烦看过的,知道的说声,这里先谢谢啦。

问题3:前面得到JSON格式的数据,绑定到Ztree上,发生错误,然后我在页面上自己var一个对象,赋值这段值(从Fire Bug 中拷贝出来),绑定成功。

仔细的查看Ztree的API,发现绑定的数据源必须是JSON对象,而我前面得到的却是JSON格式的字符串,所以这里我们必须把得到的数据转换为JSON对象。

 代码如下 复制代码
 
 success: function(msg) {
         treeData = jQuery.parseJSON(msg);
         var json = eval('(' + treeData.d + ')');
         zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, json);
  }

这下彻底成功啦。

总结

jquery ajax 我就不说了有很多教程如 http://www.111cn.net/wy/js-ajax/jquery-ajax.post.htm

下面简单介绍一下jquery ztree的作用

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件

 兼容 IE、FireFox、Chrome 等浏览器
 在一个页面内可同时生成多个 Tree 实例
 支持 JSON 数据
 支持一次性静态生成 和 Ajax 异步加载 两种方式
 支持多种事件响应及反馈
 支持 Tree 的节点移动、编辑、删除
 支持任意更换皮肤 / 个性化图标(依靠css)
 支持极其灵活的 checkbox 或 radio 选择功能
 简单的参数配置实现 灵活多变的功能
zTree是一个树形目录展示开展我们在很多网站可以看到,本文章是结合了jquery ajax返回的数据给jquery ztree来实现动态的输树形操作菜单。

时间: 2024-09-20 04:17:23

基于Jquery ajax 与 Jquery插件 Ztree使用说明的相关文章

简单的jquery ajax上传插件ajaxfileupload

做web应用经常需要上传. 所以,ajax上传经常要用到. 分享个jquery的ajax上传组件ajaxfileupload. 用法很简单:  代码如下 复制代码 <!DOCTYPE HTML> <html lang="en"> <html> <head>     <title>上传demo</title>     <meta charset="utf-8">     <scr

jquery ajax 数据绑定-JQUERY ajax提交数据到后台,进行数据库查询,然后重新绑定GridView.

问题描述 JQUERY ajax提交数据到后台,进行数据库查询,然后重新绑定GridView. 我在前台放了一个input,type=button点击后触发下面的ajax提交数据到后台.后台处理后对一个GridView进行数据绑定.前台代码如下: params = JSON.stringify(obj); $.ajax({ type: ""Post"" url: ""/aspx_consumption/Consumption_Home.aspx/

jsp+struts2+jquery ajax返回Internal server error

问题描述 jsp+struts2+jquery ajax返回Internal server error 架构: struts2+jsp+jquery 关键代码: jQuery.ajax({ url: 'business/xxxx.action', data: 'id='+id, type: 'POST', dataType:"json", error: function(request,textStatus,errorThrown) { alert(errorThrown); //前台

谈谈jQuery Ajax用法详解_jquery

定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. jQuery Ajax在web应用开发中很常用

jQuery学习之jQuery Ajax用法详解

我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理.在jQuery中有一些简单的方法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法在之前的文章中已经出现过了,相信大家很快便能掌握.当然,本篇后半部分会对jQuery.ajax()方法做非常具体的说明,因为它是本篇的重中之重.   以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求

Jquery $.ajax函数外的一段代码的执行顺序_AJAX相关

今天遇到了一个很都疼的问题.在一个函数中调用了JQuery的异步函数$.ajax ,然后在$.ajax函数外之后又有一段Jquery 代码.每次都是在$.ajax之后的代码先执行. 在网上搜了许久 终于找到了原因.拿来和大家分享分享 免得以后忘记了. async:false var flag=true; //async:false代表只有在等待ajax执行完毕后才执行 $.ajax({url:"EmailCheck.ashx",async:false,data: {"emai

Jquery ajax请求导出Excel表格的实现代码_jquery

直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; dataParams[exportExcel] = 1; var params = $.param(dataParams); var url = host+"&"+params; $('<form method="post" action="' + ur

从Ajax到JQuery Ajax学习_jquery

Ajax篇 XMLDocument和XMLHttpRequest对象 第一:创建XMLHttpRequest请求对象 复制代码 代码如下: function getXMLHttpRequest() { var xRequest=null; if(window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ xRequest=new Active

基于jquery ajax 用户无刷新登录方法详解_jquery

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html