《前端》ajax--后台返回的json数据传到前端页面并在页面的表格中填充

 https://www.cnblogs.com/zhangshitong/p/5590885.html

web前端页面：

<table id="myTable" cellpadding="1" cellspacing="0" border="1">
    <caption align="top">流程管理</caption>
    <thead>
        <tr>
            <th>流程ID</th>
            <th>流程名称</th>
            <th>流程版本</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

从后台返回的json数据：

[{"deploymentId":"80001","id":"leave-16","name":"leave","version":16},{"deploymentId":"80015","id":"leave-17","name":"leave","version":17},{"deploymentId":"80022","id":"leave-18","name":"leave","version":18},{"deploymentId":"90001","id":"leave-19","name":"leave","version":19},{"deploymentId":"90012","id":"leave-20","name":"leave","version":20},{"deploymentId":"100001","id":"leave-21","name":"leave","version":21}]

前端的js代码：（这里用的ajax返回给前台的json并做处理）

$(function () {
	$.ajax({
		url: "/jbpm2web/jbpm/show?username=<%=session.getAttribute("username") %>",
		type: "get",
		success: function (data) {
                        //eval的作用：由JSON字符串转换为JSON对象
			var obj = eval(data);
			var tbody = $('<tbody></tbody>');
			$(obj).each(function (index) {
				var val = obj[index];
				var tr = $('<tr></tr>');
                        //在tr后面加内容
				tr.append('<td>' + val.id + '</td>' + '<td>' + val.name + '</td>' + '<td>' + val.version + '</td>' + '<td><a href="/jbpm2web/jbpm/delete?id=' + val.deploymentId + '" >删除流程</a>|<a href="/jbpm2web/jbpm/start?id=' + val.id + '&username=<%=session.getAttribute("username") %>">发起流程</a></td>');
                        //在tbody后面加内容
				tbody.append(tr);
			});
			$('#myTable tbody').replaceWith(tbody);//替换
		}
	});
});

补充小知识点： var obj = eval(data);这条语句为什么要eval（）？

--在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如： JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" };
eval可以在javascript中将json文本转成javascript对象。也有博主说要多加一个圆括号，如下：

var dataObj=eval("("+data+")");(eval会带来很多问题，不建议使用，如果想实现转化用JSON.parse更好)

为什么eval要添加括号呢？ 原因：eval本身的问题。由于json是以{}的方式来开始以及结束的， 在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。 加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象， 而不是作为语句(statement)来执行。 举一个例子，例如对象字面量{}，如若不加外层的括号， 那么eval会将大括号识别为JavaScript代码块的开始和结束标记， 那么{}将会被认为是执行了一句空语句。 console.log(eval("{}"); // undefined console.log(eval("({})");// object[Object]

当然：如果后台返回的是json对象，什么操作都不需要，直接使用 data 即可。如果你是用的 jquery，将type（一般为这个配置属性）设为json， 或者利用$.getJSON()方法获得服务器返回，那么就不需要eval()方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可

跨域请求问题

我将代码贴上之后，报错：

jquery.js:8623 Failed to load file:///C:/Users/IT/Desktop/jsonDate.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

看报错可知：跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，https，发现了没？没有file协议！

在Chrome浏览器里，ajax方法用jsonp直接跨域访问本地的js文件。

报错分析：

1.判断为ajax的跨域访问问题

2.本地没有通过服务器，直接ajax用jsonp访问本地js，使用file协议！

3.上面的报错信息就已经说明了，ajax跨域只支持这些协议框架：http,https,data,chrome（Chrome浏览器）,chrome-extension（Chrome扩展插件），chrome-extension-resource（Chrome扩展资源），就是没有file协议!用了jsonp这种跨域json数据交互协议也没有，人家ajax就只支持那几个协议，并且jsonp交互协议也非官方正式的。

解决过程：

方法一：在google浏览器的安装路径后面添加" --allow-file-access-from-files",(注意前面有空格)

方法二：找到谷歌浏览器chrome.exe安装路径复制下来，我的是E:\Google\Application\chrome.exe，再打开cmd，直接输入命令

方法三：

1.为避免跨域问题要在服务器环境里运行含有ajax方法的页面，而不是本地页面直接访问本地文件的方式，这样保证了在用post或者get这类http请求，才能避免ajax跨域问题。

2.本地页面ajax()请求本地页面，须通过服务器环境运行，类似这样：
http://127.0.0.1:8888/websrc/html_ajax/testjsonp.jsp

3.如果是在远程服务器里ajax()请求外域服务器里的页面，即使通过服务器环境运行也会报跨域的错误，此时需要通过JSONP的形式！所以，还是把本地jsp放入tomcat中运行再访问本地文件吧！

那问题来了，怎么把文件放到tomcat上跑起来？

• 找到tomcat安装路径

• 将本地文件复制到tomcat webapps目录下：

回到bin目录，点击startup.bat文件运行

浏览器手动输入localhost: 8080/文件工程名/页面名.html

我安装步骤做了，打不开网页，报错为：

这样在本地模拟，不会产生跨域。

放 ie8，会报错

• 原因是jq3.0版本，不支持ie8.
  解决方案：要么替换低版本的jq，2.0以下的都可以。

要么兼容写法：修改高版本中的一些方法，添加if else判断即可。

• ie8报错isArray

//  isArray: Array.isArray, // 高版本
    isArray: Array.isArray || function( obj ) {
        return jQuery.type(obj) === "array";
    },//兼容低版本

• ie8报错addEventListner

//          ie8不支持addEventListener zz
            if (window.attachEvent) {    
                window.attachEvent("onload", completed);    
            } else if (window.addEventListener) {    
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", completed );
                // A fallback to window.onload, that will always work
                window.addEventListener( "load", completed );
            } 

• 引入低版本的ie8显示正常：

  

提供一个静态文件HTTP服务器 Sublime Server

长久来看，肯定是需要通过HTTP的方式访问你的应用，那就需要配置HTTP服务器软件。但是对于一些刚入门的人，配一个HTTP服务器（比如Apache、IIS等）比较繁琐，望而却步。

• 对于使用IDE的同学没什么好说的，每个用于Web开发的IDE都内置http服务器，不用单独配置。
• 对于喜欢轻量级编辑器的同学，比如Sublime Text，它默认是没有内置HTTP服务器的

接下来推荐一款Sublime的插件Sublime Server，这个插件可以提供一个静态文件HTTP服务器，具体使用方式如下：

• 安装Package Control（Sublime的插件管理工具），不会安装自行Google

• Command+Shift+P或Ctrl+Shift+P打开命令面板，输入Package Control: Install Package

• 稍等片刻（此时会连接到插件提供商的服务器，比较慢，有可能背墙），搜索SublimeServer

• 安装完成过后通过Tool → SublimeServer → Start SublimeServer

• 一定要用打开文件夹的方式使用Sublime，否则没有办法正常使用SublimeServer。

• 打开HTML文件，在右键菜单中选择View in SublimeServer，此时就可以以HTTP方式在浏览器中访问该文件了，

• 如果该选项是灰色的，那就说明没有启动SublimeServer，Tool → SublimeServer → Start SublimeServer

到此为止，你已经可以在Sublime中使用HTTP服务器了。

可能遇到的问题

如果Start SublimeServer不能点，可能是当前8080端口被占用了（SublimeServer默认使用8080端口）

解决方法就是打开配置文件将端口修改为其他端口：

以下是我的配置：

{
	"attempts": 5,
	"autorun": false, // 是否在启动Sublime时自动启动SublimeServer
	"defaultExtension": ".html",
	"interval": 500,
	"mimetypes":
	{
		"": "application/octet-stream",
		".c": "text/plain",
		".h": "text/plain",
		".py": "text/plain"
	},
	"port": 2016 // 端口号
}

当然其他编辑器也有类似的插件。