87,914
社区成员
发帖
与我相关
我的任务
分享js前台无法展示后台的传递的json数据
这几天在学习json，在网上找了个例子，通过数据库查询信息，封装成json格式，展示在前台的表格上，我把例子中的代码复制下来，然后稍微改了下，结果是只能展示表格，数据却没法展示出来，不知原因出在什么地方。初学前端的东西，很多都不清楚，希望大家指教下谢谢。
网页上的结果：
代码如下：
//数据库操作代码
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class StudentDao {
private Connection con;
public StudentDao(){
String driverName = "com.microsoft.sqlserver.jdbc.SQLServerDriver"; //加载JDBC驱动
String dbURL = "jdbc:sqlserver://localhost:1433; DatabaseName=pubs"; //连接服务器和数据库test
String userName = "sa"; //默认用户名
String userPwd ="940828"; //密码
try {
Class.forName(driverName);
con = DriverManager.getConnection(dbURL, userName, userPwd);
System.out.println("Connection Successful!");
} catch (Exception e) {
e.printStackTrace();
}
}
public ResultSet query(String sql, Object... args) throws Exception {
PreparedStatement ps = con.prepareStatement(sql);
for (int i = 0; i < args.length; i++) {
ps.setObject(i + 1, args[i]);
}
return ps.executeQuery();
}
protected void finalize() throws Exception {
if (!con.isClosed() || con != null) {
con.close();
}
}
}
//Servlet代码
package control;
import java.io.IOException;
import java.io.PrintStream;
import java.sql.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.StudentDao;
public class StudentServlet extends HttpServlet {
public StudentServlet() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintStream out = new PrintStream(response.getOutputStream());
response.setContentType("text/html;charSet=utf-8");
out.print("请正常打开此页");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
StringBuffer json = new StringBuffer();
json.append("[");
try {
StudentDao db = new StudentDao();
ResultSet rs = db.query("select * from Student");
while (rs.next()) {
json.append('{');
//注意每一个key-value对都要在引号之中，单引号或者双引号都可以
json.append("'id':").append("'").append(rs.getInt("id")).append("'").append(",");
json.append("'name':").append("'")
.append(rs.getString("name").trim()).append("'").append(",");
json.append("'tender':").append("'")
.append(rs.getString("tender").trim()).append("'");
json.append("},");
}
} catch (Exception e) {
e.printStackTrace();
}
//这是为了删除最后一次循环中出现的那个逗号
json.deleteCharAt(json.length() - 1);
json.append("]");
PrintStream out = new PrintStream(response.getOutputStream());
response.setContentType("text/html;charSet=utf-8");
//搞完把json打印在本Servlet上，之后前台页面读这页的内容就可以了
out.println(json.toString());
out.close();
}
}
//js代码
<!DOCTYPE html>
<html>
<head>
<title>StudentDemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
var req;
function ajaxSubmit() {
if (window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
req=new ActiveXObject("Microsoft.XMLHTTP") ;
}
if(req){
var url="http://localhost:8080/JavaWebDemo/StudentServlet";
req.open("GET",url, true);
req.setRequestHeader("Content-Type", "plain/text; charset=UTF-8");
req.onreadystatechange = function(data)
{
if( req.readyState == 4 && req.status == 200)
{
data = eval(data);
//构造前先清空源节点
document.getElementById("data").innerHTML = "";
//设置一个文件碎片
var frag = document.createDocumentFragment();
//这是表头
var tr = document.createElement("tr");
tr.innerHTML = "<td>id</td><td>username</td><td>number</td>";
frag.appendChild(tr);
//利用循环构造表格的每一行，把其放在文件碎片上面
for (var i = 0; i < data.length; i++) {
tr = document.createElement("tr");
tr.innerHTML = "<td>" + data[i].id + "</td>" + "<td>"
+ data[i].username + "</td>" + "<td>"
+ data[i].number + "</td>";
frag.appendChild(tr);
}
//此时文件碎片已经是一张表了，直接放网页就可以了
document.getElementById("data").appendChild(frag);
}
};
req.send(null);
}
}
</script>
</head>
<body>
<button onclick="ajaxSubmit()">查询</button>
<table border="1" id="data">
</table>
</body>
</html>
//配置文件
<servlet>
<servlet-name>MyControl</servlet-name>
<servlet-class>control.MyControl</servlet-class>
</servlet>
<servlet>
<servlet-name>StudentServlet</servlet-name>
<servlet-class>control.StudentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyControl</servlet-name>
<url-pattern>/mycontrol</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>StudentServlet</servlet-name>
<url-pattern>/StudentServlet</url-pattern>
</servlet-mapping>
网页上的结果：
代码如下：
//数据库操作代码
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class StudentDao {
private Connection con;
public StudentDao(){
String driverName = "com.microsoft.sqlserver.jdbc.SQLServerDriver"; //加载JDBC驱动
String dbURL = "jdbc:sqlserver://localhost:1433; DatabaseName=pubs"; //连接服务器和数据库test
String userName = "sa"; //默认用户名
String userPwd ="940828"; //密码
try {
Class.forName(driverName);
con = DriverManager.getConnection(dbURL, userName, userPwd);
System.out.println("Connection Successful!");
} catch (Exception e) {
e.printStackTrace();
}
}
public ResultSet query(String sql, Object... args) throws Exception {
PreparedStatement ps = con.prepareStatement(sql);
for (int i = 0; i < args.length; i++) {
ps.setObject(i + 1, args[i]);
}
return ps.executeQuery();
}
protected void finalize() throws Exception {
if (!con.isClosed() || con != null) {
con.close();
}
}
}
//Servlet代码
package control;
import java.io.IOException;
import java.io.PrintStream;
import java.sql.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import dao.StudentDao;
public class StudentServlet extends HttpServlet {
public StudentServlet() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintStream out = new PrintStream(response.getOutputStream());
response.setContentType("text/html;charSet=utf-8");
out.print("请正常打开此页");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
StringBuffer json = new StringBuffer();
json.append("[");
try {
StudentDao db = new StudentDao();
ResultSet rs = db.query("select * from Student");
while (rs.next()) {
json.append('{');
//注意每一个key-value对都要在引号之中，单引号或者双引号都可以
json.append("'id':").append("'").append(rs.getInt("id")).append("'").append(",");
json.append("'name':").append("'")
.append(rs.getString("name").trim()).append("'").append(",");
json.append("'tender':").append("'")
.append(rs.getString("tender").trim()).append("'");
json.append("},");
}
} catch (Exception e) {
e.printStackTrace();
}
//这是为了删除最后一次循环中出现的那个逗号
json.deleteCharAt(json.length() - 1);
json.append("]");
PrintStream out = new PrintStream(response.getOutputStream());
response.setContentType("text/html;charSet=utf-8");
//搞完把json打印在本Servlet上，之后前台页面读这页的内容就可以了
out.println(json.toString());
out.close();
}
}
//js代码
<!DOCTYPE html>
<html>
<head>
<title>StudentDemo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
var req;
function ajaxSubmit() {
if (window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
req=new ActiveXObject("Microsoft.XMLHTTP") ;
}
if(req){
var url="http://localhost:8080/JavaWebDemo/StudentServlet";
req.open("GET",url, true);
req.setRequestHeader("Content-Type", "plain/text; charset=UTF-8");
req.onreadystatechange = function(data)
{
if( req.readyState == 4 && req.status == 200)
{
data = eval(data);
//构造前先清空源节点
document.getElementById("data").innerHTML = "";
//设置一个文件碎片
var frag = document.createDocumentFragment();
//这是表头
var tr = document.createElement("tr");
tr.innerHTML = "<td>id</td><td>username</td><td>number</td>";
frag.appendChild(tr);
//利用循环构造表格的每一行，把其放在文件碎片上面
for (var i = 0; i < data.length; i++) {
tr = document.createElement("tr");
tr.innerHTML = "<td>" + data[i].id + "</td>" + "<td>"
+ data[i].username + "</td>" + "<td>"
+ data[i].number + "</td>";
frag.appendChild(tr);
}
//此时文件碎片已经是一张表了，直接放网页就可以了
document.getElementById("data").appendChild(frag);
}
};
req.send(null);
}
}
</script>
</head>
<body>
<button onclick="ajaxSubmit()">查询</button>
<table border="1" id="data">
</table>
</body>
</html>
//配置文件
<servlet>
<servlet-name>MyControl</servlet-name>
<servlet-class>control.MyControl</servlet-class>
</servlet>
<servlet>
<servlet-name>StudentServlet</servlet-name>
<servlet-class>control.StudentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyControl</servlet-name>
<url-pattern>/mycontrol</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>StudentServlet</servlet-name>
<url-pattern>/StudentServlet</url-pattern>
</servlet-mapping>
...全文
请发表友善的回复…
发表回复
baidu_31302759 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的[/quote]
代码又修改了，你看看下边[/quote]
click是不是在移动后才触发 要不怎么会 又跑回去[/quote]
我不知道出什么问题了，感觉像是数据没传过来。移动后触发是指？[/quote]
对不起 对不起 我回错了
这个返回的data没数据么
wudiwudibaozi 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的[/quote]
代码又修改了，你看看下边[/quote]
click是不是在移动后才触发 要不怎么会 又跑回去[/quote]
我不知道出什么问题了，感觉像是数据没传过来。移动后触发是指？
baidu_31302759 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的[/quote]
代码又修改了，你看看下边[/quote]
对不起 对不起 我回错地方了
baidu_31302759 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的[/quote]
代码又修改了，你看看下边[/quote]
click是不是在移动后才触发 要不怎么会 又跑回去
wudiwudibaozi 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的[/quote]
代码又修改了，你看看下边
wudiwudibaozi 2016-08-24
- 打赏
- 举报
大神，你这么说的我不知道把代码加在哪里，然后我又把代码改成了如下：
<script>
function ajaxSubmit() {
$.ajax({
type : "post",
url : "SS",
dataType : "text",
success : function(data) {
data = eval(data);
//构造前先清空源节点
document.getElementById("data").innerHTML = "";
//设置一个文件碎片
var frag = document.createDocumentFragment();
//这是表头
var tr = document.createElement("tr");
tr.innerHTML = "<td>id</td><td>username</td><td>number</td>";
frag.appendChild(tr);
//利用循环构造表格的每一行，把其放在文件碎片上面
for (var i = 0; i < data.length; i++) {
tr = document.createElement("tr");
tr.innerHTML = "<td>" + data[i].id + "</td>" + "<td>"
+ data[i].username + "</td>" + "<td>"
+ data[i].number + "</td>";
frag.appendChild(tr);
}
//此时文件碎片已经是一张表了，直接放网页就可以了
document.getElementById("data").appendChild(frag);
},
error : function() {
alert("出错了");
}
});
}
</script>
这么着表格画出来了，表中的信息数量与数据库中表的条数是一致的，但是显示的值都是“ undefined”，用火狐浏览器调试在“ data = eval(data);”后面点断点，看到data的三个值都是object，这是不是因为没有拿到数据，或者json格式出了问题之类的。
baidu_31302759 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的
baidu_31302759 2016-08-24
- 打赏
- 举报
其实这个东西 动态生成也行 不至于这么费劲 不就是一个table么
用FreemarkerLoadUtils.loadFreemarker 在map中直接丢进去也行 都一样
table还是动态生成 看着能舒服那么一丢丢
baidu_31302759 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
[/quote]
上面组表格的语句 我觉得没错 可以组出来 遍历下 挨个塞进去后append就好了
因为传过来的我看是字符串 你需要转化下 [/quote]
好的[/quote]
传过来的是json baidu下 json字符串转对象
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
[/quote]
上面组表格的语句 我觉得没错 可以组出来 遍历下 挨个塞进去后append就好了
因为传过来的我看是字符串 你需要转化下 [/quote]
好的[/quote]
传过来的是json baidu下 json字符串转对象wudiwudibaozi 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
[/quote]
上面组表格的语句 我觉得没错 可以组出来 遍历下 挨个塞进去后append就好了
因为传过来的我看是字符串 你需要转化下 [/quote]
好的
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
[/quote]
上面组表格的语句 我觉得没错 可以组出来 遍历下 挨个塞进去后append就好了
因为传过来的我看是字符串 你需要转化下 [/quote]
好的baidu_31302759 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
[/quote]
上面组表格的语句 我觉得没错 可以组出来 遍历下 挨个塞进去后append就好了
因为传过来的我看是字符串 你需要转化下
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
[/quote]
上面组表格的语句 我觉得没错 可以组出来 遍历下 挨个塞进去后append就好了
因为传过来的我看是字符串 你需要转化下 wudiwudibaozi 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了[/quote]
至于为什么用我也不知道，去掉eval后，确实能拿到数据了，我把js代码改成仅读取数据，要是带着画表格的代码还是没法把数据对应到表格中。
baidu_31302759 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval[/quote]
序列化.... 艾玛 我真方了baidu_31302759 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用eval
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 [/quote]
顺便问一句要eval 这个干啥 难道你返回回来的字符串!?
是字符串就 反序列化 我是不用evalbaidu_31302759 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的
后台是拿到三条这样的数据[/quote]
我方了,这不挺好的 wudiwudibaozi 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
[/quote]
后台是拿到三条这样的数据
baidu_31302759 2016-08-24
- 打赏
- 举报
http://blog.csdn.net/yongh701/article/details/44587469 这个是源代码出处，直接用源代码出错，所以改了改，结果拿不到数据[/quote]
后台返回的是啥 能瞧一瞧么
wudiwudibaozi 2016-08-24
- 打赏
- 举报
版主,我是没这么玩过我不太知道,平时我都是$.ajax({})这样玩的,话说他这好像是把这东西先存上,又拿出来的[/quote]
代码又修改了，你看看下边[/quote]
click是不是在移动后才触发 要不怎么会 又跑回去[/quote]
我不知道出什么问题了，感觉像是数据没传过来。移动后触发是指？[/quote]
对不起 对不起 我回错了
这个返回的data没数据么 [/quote]
在火狐浏览器打断点看返回的data是三个object数据，没有拿到数据库的值
孟子E章 2016-08-23
- 打赏
- 举报
data = eval(req.responseText);
response.setContentType("text/text;charSet=utf-8"); //json格式无需返回htmll
req.open("POST",url, true); 你看看你的java中doGet返回的是json格式吗
孟子E章 2016-08-23
- 打赏
- 举报
问题可能出在2个地方
1，浏览器直接输入url看返回的内容真是json格式吗？
2.如果上面返回的却是是json格式，则eval(data)不正确。
大家要学会调试
加载更多回复（3）
