Question

在我的项目的一个页面中，我有这个jquery代码，它接收两个json字符串，并且应该在我的表单中添加一些字段：

<script>
$("document").ready(function(){
    var obj_tipo = jQuery.parseJSON( "${lista_tipos}" );
    var obj_campo = jQuery.parseJSON( "${lista_campos}" );

    var newRow = $('<tr>');
    col_1 = '<td> Tipo: </td>';
    col_2 = '<td> <select name="tipo"> </select> </td> </tr>';
    for(var nome in obj_tipo)
        col_2.append('<option value="'+nome+'">'+nome+'</option>');

    newRow.append(col_1);
    newRow.append(col_2);

    $("table.cadastro").append(newRow);

    col_3 = '';
    for(var nome in obj_campo)
        col_3 += '<tr> <td> '+nome+' : </td> <td> <input type="text" name="'+nome+'" value="'+nome+'" size=20 maxlenght=40> </td> <tr>';

    $("table.cadastro").append(col_3);
});
</script>

但我的页面中没有显示任何内容。我从Chrome查看了开发人员工具，浏览器正在阅读此内容：

<script>
$("document").ready(function(){
    var obj_tipo = jQuery.parseJSON( "{"Tipo":[{"id":3,"nome":"gerente"},{"id":4,"nome":"supervisor"},{"id":5,"nome":"analista"},{"id":6,"nome":"tecnico"},{"id":7,"nome":"secretaria"},{"id":8,"nome":"seguranca"}]}" );
    var obj_campo = jQuery.parseJSON( "{"Key":[{"id":1,"nome":"e-mail"},{"id":2,"nome":"cidade"}]}" );

    var newRow = $('<tr>');
    col_1 = '<td> Tipo: </td>';
    col_2 = '<td> <select name="tipo"> </select> </td> </tr>';
    for(var nome in obj_tipo)
        col_2.append('<option value="'+nome+'">'+nome+'</option>');

    newRow.append(col_1);
    newRow.append(col_2);

    $("table.cadastro").append(newRow);

    col_3 = '';
    for(var nome in obj_campo)
        col_3 += '<tr> <td> '+nome+' : </td> <td> <input type="text" name="'+nome+'" value="'+nome+'" size=20 maxlenght=40> </td> <tr>';

    $("table.cadastro").append(col_3);
});
</script>

有人可以指出我这段代码有什么问题吗？

ps。：此页面的完整代码是：

https://github.com/klebermo/webapp_horario_livre/blob/master/WebContent/WEB-INF/jsp/usuario/cadastra.jsp

json字符串从此类的方法'cadastra'发送到页面：

https://github.com/klebermo/webapp_horario_livre/blob/master/src/com/horariolivre/controller/UsuarioController.java

Answer 1

您需要使用document代替"document"。读 docs。
还将您的json字符串包装在''

使用

$(document).ready(function(){
   var obj_tipo = jQuery.parseJSON('${lista_tipos}' );
   var obj_campo = jQuery.parseJSON( '${lista_campos}' );
 ......

Answer 2

代码的这一部分存在一些主要问题（除了Satpal的答案之外）：

var newRow = $('<tr>');
col_1 = '<td> Tipo: </td>';
col_2 = '<td> <select name="tipo"> </select> </td> </tr>';
for(var nome in obj_tipo)
    col_2.append('<option value="'+nome+'">'+nome+'</option>');

newRow.append(col_1);
newRow.append(col_2);

$("table.cadastro").append(newRow);

你开始很好，创建一个jQuery对象，里面包含一个全新的<tr>元素。下一行只是用字符串初始化变量，到目前为止还可以。

下一行也用字符串初始化变量col_2，这在技术上是可以接受的。除了接下来你尝试在它上面调用.append()（一个jQuery函数），即使它不是一个jQuery对象。即使是这样，您也可以将它们附加到<td>，而不是<select>，这正是您真正想要的。您在</tr>中也有一个结束col_2标记，这是不正确的;当您使用.append()时，您不使用HTML字符串（这似乎是一种常见的误解），您正在使用实际的DOM元素 - <tr>已经关闭了它被创造了。

应该看起来更像这样：

var newRow = $('<tr>');
col_1 = '<td> Tipo: </td>';
col_2 = $('<td></td>');
var select = $('<select name="tipo">');
for(var nome in obj_tipo)
    select.append('<option value="'+nome+'">'+nome+'</option>');

select.appendTo(col_2);
newRow.append(col_1);
newRow.append(col_2);

$("table.cadastro").append(newRow);

我的jsp页面上没有显示Json字符串

2 个答案: