java - 如何在不刷新页面的情况下从服务器获取数据

Question

我是网络开发新手。我的工作是从服务器获取数据并每隔 1 或 2 秒使用 amcharts 绘制它们。

这是我到目前为止所拥有的:

<form id="getdata" role="form" method="post" action=@routes.DataApplication.get_data()>
    <input type="text" name="device" id="device">
    <input type="text" name="type" id="type">
    <button id = "submit" type="submit">Submit</button>
 </form>

一旦我输入设备并键入并单击提交按钮，它将运行 Java 方法 get_data()。该方法将搜索数据库并返回与设备名称匹配的数据，但它显示的是另一个页面中的数据，例如www.somepage/getdata。上面的 html 位于 www.somepage/data 页面中。

我尝试使用 jquery .post() 但问题是它需要一个 url，我尝试将 /getdata 传递给它，但没有不工作。

我的问题是:有没有办法保存我们从 @routes.DataApplication.get_data() 操作获取的数据，而无需重新加载页面？

顺便说一句，我正在使用play框架来开发网页。

更新

好吧，现在取得了一些进展，我尝试使用ajax post，但是数据返回(在控制台中)是这样的:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

这里我有 11 个对象。如果我不使用ajax post(使用原始的post表单方法)，我也会得到11个数据点。

这是我的代码:

<script>    
$('#driver').click(function(evt) {
    var dataabc = $('form').serialize();
    console.log(dataabc);
    $('#errors').hide();
    $.ajax({
        type : 'POST',
        data :  dataabc, 
        url : '@routes.DataApplication.get_data()',
        success : function(data) {
            alert("good");
            console.log(data);
        },
        error : function(result) {
            setError('Make call failed');
        }
    });
    return false;
});
</script>

get_data() 所做的只是获取用户输入的数据(即表单)并从数据库中获取相应的数据，然后返回 ok(node);。该节点是JsonNode

任何帮助将不胜感激..

Answer 1

因为您在 javascript 中获取了一个对象数组，并且它存储在 data 中。您可以循环遍历它并显示内容是一些 div 标签。

示例:创建一个空 div 以在成功的 ajax 调用后填充数据。

<div id="mytextarea"></div>

然后在你的ajax中success ，您可以循环遍历数组并将数据附加到 div 标签的innerHTML，而不是打印到控制台，如下所示...

var myTextArea = document.getElementById('mytextarea');
for (var x = 0; x < data.length; x++){
myTextArea.innerHTML = myTextArea.innerHTML + data[x].id + '<br/>';
}

编辑 1:我发现您知道对象的属性，因此我更新了代码以仅附加 id到文本区域。