使用JQuery处理列表中的JSON数据

我正在使用Ajax & Jquery处理JSON数据（In List）来自服务器，但客户端无法接受JSON数据并不断弹出错误方法。使用JQuery处理列表中的JSON数据

我已经实现了一个renderList（）方法来解析列表，但它仍然不起作用。

以下是我的Javascript和Java代码。

有人可以帮我吗？提前致谢。

的JavaScript：

var serviceURL = "http://localhost:8080/TransportationNetwork/rest/paths"; 


$('#findPaths').click(function() { 
     getPaths(); 
}); 

function getPaths() { 
    console.log('display paths'); 
    $.ajax({ 
     type:'GET', 
     url: serviceURL, 
     dataType:'json', // data type get back from server 
     data:'st=' + dataToServer(), //data sent to server 
     success: renderList, 
     error: function(jqXHR, textStatus, errorThrown){ 
      alert('Path Finder: ' + textStatus); 
     } 
    }); 
} 



function dataToServer() { 
    var array = ""; 
     str1 = $('#source').val(); 
     str2 = $('#target').val(); 

    array = str1 + "," + str2; 

    return array; 
} 

function renderList(data) { 
    var list = data == null ? [] : (data instanceof Array ? data : [data]); 

$('#PathList li').remove(); 
$.each(list, function(index, path) { 
    $('#PathList').append('<li>'+ path.source + ' -> ' + path.target + ': ' + path.weight + '</li>'); 
});

}

的Java： 在资源文件：

@GET 
@Produces(MediaType.APPLICATION_JSON) 
public List<DirectedEdge> pathsInfo(@QueryParam("st") String st) { 
    System.out.println("Searching paths : " + st); 
    return pathDao.getEdgeList(st); 
}

返回DirectedEdge对象：

public class DirectedEdge { 
private int source; 
private int target; 
private double weight; 

public DirectedEdge() { 

} 

public DirectedEdge(int v, int w, double weight) { 
    super(); 
    this.source = v; 
    this.target = w; 
    this.weight = weight; 
} 
.... Other code ... 
}

Testing Result from Server

来源

2015-11-05 Thomas Hu

你确定你是在正确的格式发送数据？ –

，您可以从底部看到图片“服务器测试结果”。我使用邮递员来测试数据来自服务器的确实是json格式。 @devlincarnate –

我了解来自服务器的数据是json。我的问题是您是否验证了您发送到服务器的数据格式正确。您尚未指定contentType，因此我假设服务器期望您发送默认的contentType。 ''st ='+ dataToServer（）'的价值是什么？ –

您的JSON应该返回为string，不是Array。尝试使用JSON.parse

JSON.parse docs

renderList应该是这个样子：

function renderList(data) { 
    var parsedData = JSON.parse(data); 
    var list = parsedData == null ? [] : (parsedData instanceof Array ? parsedData : [parsedData]); 
}

FYI：instanceof是相当不可靠的。我建议将此帮助方法添加到代码中以确定将来的类型：

function getType(data) { 
    return Object.prototype.toString.call(data).slice(8, -1); 
}

这将返回对象类型的字符串表示形式。

你可以看到更多关于这个话题在这里： instanceof in JavaScript

来源

2015-11-05 23:55:47 JohnStrong

我试过了你的代码，但它仍然给我那个警报方法。 @john –

@ user3765602那么什么是状态和消息？ –

尝试将'$ .ajax'的'dataType'属性设置为“json”。 @ user3765602 – JohnStrong

使用JQuery处理列表中的JSON数据

回答

相关问题