Question

我正在尝试用这个jquery代码填充一个表：

$(document).ready(function(){
    var url = "<c:out value="${lista}"/>";
    $.get(url, function(data){
        var json = jQuery.parseJSON(data);
        for(var item in json.usuario) {
            var row = $('<tr>');
            row.append('<td>'+json.usuario[item].login+'</td>');
            row.append('<td>'+json.usuario[item].pnome+'</td>');
            row.append('<td>'+json.usuario[item].unome+'</td>');
            row.append('<td>'+json.usuario[item].email+'</td>');
            row.append('<td> <button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'" data-target="'+json.usuario[item].id+'">Editar</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'" data-target="'+json.usuario[item].id+'">Remover</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'" data-target="'+json.usuario[item].id+'">Permiss&otilde;es</button> </td>');
            $('tbody.content').append(row);
        }
    });
});

基于这个json字符串：

{"usuario":[{"id":1,"login":"klebermo","pnome":"Kleber","unome":"Mota","email":"klebermo@gmail.com"}]}

但是当我打开页面时，除了没有行添加到表中之外，这个错误也显示在控制台中：

Uncaught SyntaxError: Invalid flags supplied to RegExp constructor 'usuario'

任何人都可以在这里说出我做错了什么？

更新

我尝试对其他代码执行相同操作，但面临相同的结果：

$.each(json.usuario, function(index, item){
    var row = $('<tr>');
    row.append('<td>'+item.login+'</td>');
    row.append('<td>'+item.pnome+'</td>');
    row.append('<td>'+item.unome+'</td>');
    row.append('<td>'+item.email+'</td>');
    row.append('<td> <button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'" data-target="'+item.id+'">Editar</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'" data-target="'+item.id+'">Remover</button> <button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'" data-target="'+item.id+'">Permiss&otilde;es</button> </td>');
    $('tbody.content').append(row);
});

更新2

我目前的代码是：

$(document).ready(function(){
    var url = "<c:out value="${lista}"/>";
    console.log("url="+url);
    $.get(url, function(data){
        console.log("data="+data);
        var json = jQuery.parseJSON( data );
        $.each(json.usuario, function(index, item){
            console.log("index="+index);
            console.log("id="+item.id);
            console.log("login="+item.login);
            console.log("pnome="+item.pnome);
            console.log("unome="+item.unome);
            console.log("email="+item.email);

            console.log('inserindo colunas de dados');
            var row = $('<tr>');
            row.append('<td>'+item.login+'</td>');
            row.append('<td>'+item.pnome+'</td>');
            row.append('<td>'+item.unome+'</td>');
            row.append('<td>'+item.email+'</td>');

            console.log('inserindo colunas dos botões');
            var col = $('<td>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'" data-target="'+item.id+'">Editar</button>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'" data-target="'+item.id+'">Remover</button>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'" data-target="'+item.id+'">Permiss&otilde;es</button>');

            console.log('inserindo linha na tabela');
            $('tbody.content').append(row);
        });
    });
});

控制台中的输出是：

url=/loja/usuario/listagem.json
data=
{"usuario":[{"id":0,"login":"klebermo","pnome":"Kleber","unome":"Mota","email":"klebermo@gmail.com"}]}
index=0
id=0
login=klebermo
pnome=Kleber
unome=Mota
email=klebermo@gmail.com
inserindo colunas de dados
inserindo colunas dos botões
Uncaught SyntaxError: Invalid flags supplied to RegExp constructor 'usuario'

Answer 1

我认为你的主要问题是你试图解析你的JSON两次。

jQuery已经自动解析了服务器的JSON响应。在大多数情况下，您无需致电jQuery.parseJSON()。

以下是我认为更好的代码版本：

$(function(){
    $.get("<c:out value="${lista}"/>").done(function (data) {
        var $rowTemplate = $(
        '<tr>' +
            '<td></td>' + 
            '<td></td>' + 
            '<td></td>' + 
            '<td></td>' + 
            '<td>' +
                '<button type="button" class="btn btn-sm btn-primary" data-action="'+${editar}+'">Editar</button> ' +
                '<button type="button" class="btn btn-sm btn-primary" data-action="'+${remover}+'">Remover</button> ' +
                '<button type="button" class="btn btn-sm btn-primary" data-action="'+${grupos}+'">Permissões</button> ' +
            '</td>' +
        '</tr>');

        $.each(data.usuario, function (item) {
            var $row = $rowTemplate.clone().appendTo('tbody.content');
            $row.find("td:eq(0)").text(user.login);
            $row.find("td:eq(1)").text(user.pnome);
            $row.find("td:eq(2)").text(user.unome);
            $row.find("td:eq(3)").text(user.email);
            $row.find("button").data("target", user.id);
        });
    });
});

考虑使用客户端模板引擎，它首先会使这一点变得不必要。

Answer 2

经过多次尝试并分析上述消息后，我终于通过以下代码解决了我的问题：

$(document).ready(function(){
    var url = "<c:out value="${lista}"/>";
    $.get(url, function(data){
        var json = jQuery.parseJSON( data );
        $.each(json.usuario, function(index, item){
            var row = $('<tr>');
            row.append('<td>'+item.login+'</td>');
            row.append('<td>'+item.pnome+'</td>');
            row.append('<td>'+item.unome+'</td>');
            row.append('<td>'+item.email+'</td>');

            var col = $('<td>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="editar" data-target="'+item.id+'">Editar</button>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="remover" data-target="'+item.id+'">Remover</button>');
            col.append('<button type="button" class="btn btn-sm btn-primary" data-action="permissoes" data-target="'+item.id+'">Permiss&otilde;es</button>');
            row.append(col);

            row.append('<td></td>');

            $('tbody.content').append(row);
        });
    });
});

未捕获的SyntaxError：提供给RegExp构造函数'usuario'的无效标志

2 个答案: