Question

我正在从json文件加载我的表在document.ready（）上，如下所示

文件加载......

$(document).ready(function () {
        getSummaryData(function (data1) {
            var dataarray=new Array();
            dataarray.push(data1);


            $('#summaryTable').DataTable({
                data: dataarray,
                "columns": [
               ---
               ---

并从文件中检索数据，如下所示

    function getSummaryData(cb_func1) {
    $.ajax({
        url: "data/summary.json",
        success: cb_func1
    });
    console.log(cb_func1)
}

这本质上是加载虚拟数据，所以我可以弄清楚如何正确加载表等。这很好。

它确实如下 1.页面加载 2.从文件中读取数据 3.填充表格

实际上，数据不会从文件中加载，但会从xhr响应中返回，但我无法弄清楚如何将它们连接在一起。用例是

通过XMLHttpRequest
获取回复
填充表格（与文件格式相同）

我将发布文件如下......

<script>
    var form = document.getElementById('form');
    var fileSelect = document.getElementById('select');
    var uploadButton = document.getElementById('upload');

    ---
    form.onsubmit = function(event) {
        event.preventDefault();
    ---
---
 var xhr = new XMLHttpRequest();

 // Open the connection.  
 xhr.open('POST', 'localhost/uploader', true);      

  // handler on response
    xhr.onload = function () {
        if (xhr.status === 200) {

            console.log("resp: "+xhr);
            console.log("resptxt: "+xhr.responseText);

            //somehow load table with xhr.responseText

        } else {
            alert('ooops');
        }
    };

    // Send the Data.
    xhr.send(formData);

理想情况下，我需要在表中使用一个空行或类似的行，直到有人上传文件然后表格中填充了响应。

任何帮助都非常感激。

Answer 1

var xhr1 = new XMLHttpRequest();
xhr1.open('POST', "youruploadserver.com/whatever", true);
xhr1.onreadystatechange = function() {
    if (this.status == 200 && this.readyState == 4) {
        console.log(this.responseText);
        dostuff = this.responseText;
  };//end onreadystate
 xhr1.send();

看起来大致正确，你想要this.readyState == 4。您的问题是什么，如何从响应中填充表格？这还取决于您将如何发送数据以及服务器将如何解析数据，看起来您想要使用智能的json格式。发送之前JSON.stringify(formdata)，然后确保服务器将其解析为json对象使用body-parser取决于您使用的服务器。然后你JSON.stringify()将对象发回去。

从XMLHttpRequest响应加载HTML表

1 个答案: