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

【问题标题】：how to get data from server without refreshing the page如何在不刷新页面的情况下从服务器获取数据
【发布时间】：2014-07-20 21:48:56
【问题描述】：

我是网络开发的新手。我的工作是每 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 form 方法），我也会得到 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() 所做的只是获取用户输入数据（即表单）并从数据库和return ok(node); 中获取相应的数据。这个节点是JsonNode

任何帮助将不胜感激..

【问题讨论】：

在这种情况下，如果可以使用node.js，则可以使用ajax调用或更好。
您尝试过 AJAX 吗？你能检查这个链接stackoverflow.com/questions/11133059/…
我试过了，但它返回的是 html 代码而不是我想要的数据

标签： java javascript html ajax playframework

【解决方案1】：

由于您在 javascript 中返回了一个对象数组，并且它存储在 data 中。你可以遍历它并显示内容是一些 div 标签。

示例：成功调用 ajax 后，创建一个空 div 来填充数据。

<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 附加到文本区域。

【讨论】：

太好了，非常感谢，它有效。但我有一个问题，我打印出 get_data() java 方法中的数据，我得到了 json 格式的数据，比如 [ {"id":"demo", "timer":100, "start":0 , ...}, ..] 没有 object 关键字，这正是我想要的，json 格式。但是，由于某种原因，在将数据返回给 ajax 发布请求后，数据带有 object 关键字。知道为什么会这样吗？
你能发布你的 get_data() 方法吗？我认为您将其编写为 json 格式，而 json 是 JavaScript Object Notation。这只是纯文本。您可以使用JSON.parse 解析它。您可以参考这里stackoverflow.com/questions/4935632/…了解更多详情。

【解决方案2】：

告诉我们 url 究竟返回了什么响应将非常有帮助。通常应该是 XML 或 JSON。您可以使用 FireBug 或任何其他开发人员工具来捕获响应并将其发布在此处。

【讨论】：

这是我得到的 [Object {id="demo", timer=100, start=0, ...}, Object {id="demo", timer=62, start=0 , ...}, 对象 {id="demo", timer=22, start=0, ...}, 对象 {id="demo", timer=44, start=0, ...}, 对象 { id="demo", timer=55, start=0, ...}, 对象 {id="demo", timer=55, start=0, ...}, 对象 {id="demo", timer= 55, start=0, ...}, 对象 {id="demo", timer=55, start=0, ...}, 对象 {id="demo", timer=55, start=0, .. .}, 对象 {id="demo", timer=56, start=0, ...}, 对象 {id="demo", timer=44, start=0, ...}]

【解决方案3】：

它不决定返回什么 - 是你！

如果您将在 get_data() 操作中返回实例 JSON 对象，您的 AJAX 将收到 JSON，请自行检查：

public static Result get_data(){
    ObjectNode node = Json.newObject();
    node.put("hello", "world");
    return ok(node);
}

【讨论】：