百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格

第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念。
在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里需要先console.log(editor);在官方API中已经告诉我们写入的方法是setContent(),这里只要能传入我们最终拼好的的字符串,即可以在初始化中,绘制出我们想要的任何节点。
再send()完成之后,onreadystatechange = function(){},先上一段AJAX的代码。这段AJAX是消除游览器兼容,从尼古拉斯的书中学到。


代码如下:

function AJAX() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "string") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
for (var i = 0, len = versions.length; i < len; i++) {
try {
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
} catch (ex) {
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("错误");
}
}

在JSON数据集中,我们知道,这是一对key value的数据集。在我们从服务器端取到Json对象时,我们就要开始解析它,然后再生成,我们需要的DOM节点。比如,如下一对JSON数据集。


代码如下:

{
"head":{
    "rows":3,
"cells":2     
 },
"body":{
    "rows":3,
"cells":2     
 }
}

接下来,我们取得的数据是存储在responseText中的,所以,还需要设置一个变量接受一下,如此var a = eval("("+xhr.responseText+")");到了这一步,我们整个Json对象,就从服务端取了出来。接着for in它,就可以取到在Json对象中存储的数据。


代码如下:

for (var b in a) {
console.log(a[b].rows);
}
//for in遍历Json对象,b就是已经取到了key值了。

再得到具体的JSON数据集后,就可以通过+= 来拼写节点的字符串,用+=来拼写,从上到下,判断,循环,都可以,只需要在最开始设置一个空变量,来接收这一切。
最后一步,editor.setContent(Json);即可以完成编辑器可以编辑区域的初始化,从服务端取值,来渲染节点。
业精于勤,荒于嬉。行成于思,毁于随。新人的成长,在于总结。所有文章与例子,仅是自我总结,都仅供学习交流。

(0)

相关推荐

  • 实例详解JSON取值(key是中文或者数字)方式

    JSON取值(key是中文或者数字)方式详解 先准备一个json对象用于演示 var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'}; 1.使用JS中with关键字 with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题 } 2.最常见的传统的读取key console.

  • JSON取值前判断

    复制代码 代码如下: public static void main(String[] args)throws Exception{      String jsonStr1="{\"access_token\":\"OezXcEiiBSKSxW0eoylIeIVb08lFhyeFsq6cUJJNo8XYLoJjqYARJOZUrnqhfvnyMKOSjz5SHPHGUmt6f09_762MWQ0HLnZtffDPyD2A6TgCqWlZAEsHLhIaaQVYx1

  • 浅谈json取值(对象和数组)

    按对象取值: jQuery代码如下 (function ($) { $.getJSON('ajax/test.json', function (data) { var items = []; $.each(data.comments, function (key, val) { items.push('<li class="' + 'tag' + val.class + '">' + '<a href="#">' + val.content

  • js遍历json对象所有key及根据动态key获取值的方法(必看)

    实例如下: var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 以上这篇js遍历json对象所有key及根据动态key获取值的方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级

  • 当json键为数字时的取值方法解析

    当json的键为数字时如何取值,如: var aa={'111':'aaaaa'}; alert(sss.111); 这样是不行的,alert不会弹任何东西. json的键必须是一个对象,才能取出东西,如: var aa={'s111s':'aaaaa'}; var idd="s111s"; alert(sss.idd); 解答: 对于数字键名或者非正常变量字符(比如有空格),必须使用 aa[x]的方式.var aa={'111':'aaaaa'}; alert(sss["1

  • java json字符串转JSONObject和JSONArray以及取值的实例

    java json字符串转JSONObject和JSONArray以及取值的实例 实现代码: import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class JsonTest { public static void main(String[] args) { String joStr = "{name:\"张三\",age:\"20\"}"; //将json字符

  • 百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格

    第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念. 在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里需要先console.log(editor);在官方API中已经告诉我们写入的方法是setContent(),这里只要能传入我们最终拼好的的字符串,即可以在初始化中,绘制出我们想要的任何节点. 再send()完成之后,onreadystatechange = function(){},先上一段AJAX的代码.这段AJAX是消除游览器兼容,从尼古拉斯的书中学

  • 在python中将字符串转为json对象并取值的方法

    如下所示: string =" { "status": "error", "messages": ["Could not find resource or operation 'BZK1.MapServer' on the system."], "code": 404 }" print '对象:' string print '取值:' json.loads(string)['code']

  • Vuex如何获取getter对象中的值(包括module中的getter)

    目录 Vuex获取getter对象中的值 1.直接从根实例获取 2.使用mapGetters取值 3.使用module中的getter 计算属性获取的getter值需要刷新才能更新 描述 解决 Vuex获取getter对象中的值 getter取值与state取值具有相似性 1.直接从根实例获取 // main.js中,把store注册在根实例下,可使用this.$stroe.getters直接取值 computed: {   testNum1() {     return this.$store

  • Python 从列表中取值和取索引的方法

    如下所示: name_list["zhangsan","lisi","wangwu"] #1.取值 print(name_list[0]) print(name_list[1]) print(name_list[2]) #2.取索引 print(name_list.index("lisi")) #3.修改 name_list[1]="李四" #4.增加数据 name_list.append("王小

  • python 字典中取值的两种方法小结

    如下所示: a={'name':'tony','sex':'male'} 获得name的值的方式有两种 print a['name'],type(a['name']) print a.get('name'),type(a.get('name')) 发现这两个结果完全一致,并没有任何的差异. 怎么选择这两个不同的字典取值方式呢? 如果字典已知,我们可以任选一个,而当我们不确定字典中是否存在某个键时,我之前的做法如下 if 'age' in a.keys(): print a['age'] 因为不先

  • 替换json对象中的key最佳方案

    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率. 看到标题你可能会想,如此简单的问题值得去探究吗?如果我有一个json object,只需下面简单的几行代码就可以完成: var o

  • JS遍历Json字符串中键值对先转成JSON对象再遍历

    1.将Json字符串转换成JSON对象 var t='{"firstName": "cyra", "lastName": "richardson"}'; var obj = eval('(' + t + ')'); 2.遍历读取键值对 for(var str in obj){ alert(str+'='+obj[str]); }

  • bootstrap timepicker在angular中取值并转化为时间戳

    上一篇我们讲到angular对于timepicker的一个封装后的插件,但是由于angular的版本必须是v1.2.30以上的.对于有些大型系统,一时升级angular的版本实在耗费时间.那么可以用这种方法来取值. 页面上的时间格式是这样的: 文件引入 '/bootstrap-datetimepicker.min.css', '/bootstrap-datetimepicker.min.js', '/bootstrap-datetimepicker.zh-CN.js',//中文包 html <d

  • Python如何在bool函数中取值

    bool是Boolean的缩写,只有真(True)和假(False)两种取值 bool函数只有一个参数,并根据这个参数的值返回真或者假. 1.当对数字使用bool函数时,0返回假(False),任何其他值都返回真. >>> bool(0) False >>> bool(1) True >>> bool(-1) True >>> bool(21334) True 2.当对字符串使用bool函数时,对于没有值的字符串(也就是None或者空

  • javascript中json对象json数组json字符串互转及取值方法

    今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar":"property","baz":3}'; var jsObject = JSON.parse(jsonString); //转换为json对象 alert(jsObject.bar); //取json中的值  2.json对象转为json类型的字符串 var js

随机推荐