Заполнение таблицы HTML с использованием JQUERY, PHP и AJAX

Я пытаюсь заполнить таблицу HTML, используя код JQUERY, AJAX и PHP. Когда я запускаю свой код, моя таблица отображается, но она заполнена «неопределенным».

У меня есть три части кода. Вот мой HTML и jQuery:

var integer = $("#transfers_in").attr("name");
alert("integer: " + integer);
$.ajax('includes/test.php', {
  type: 'POST', // http method
  data: {
    dataType: 'json',
    myData: integer
  }, // data to submit
  success: function(response) {
    var len = response.length;
    for (var i = 0; i < len; i++) {
      var name = response[i].name;
      var amount = response[i].amount;
      var tr_str = "<tr>" +
        "<td align='center'>" + (i + 1) + "</td>" +
        "<td align='center'>" + name + "</td>" +
        "<td align='center'>" + amount + "</td>" +
        "</tr>";

      $("#money_in").append(tr_str);
    }
  }
});
<table id = "money_in">
  <tr>
    <th>Name</th>
    <th>Amount(Million £)</th>
  </tr>
</table>

и вот мой PHP-код:

<?php

if (isset($_POST['myData'])) {
    $integer = $_POST['myData'];

    if ($integer === "1"){
        include 'db_connection.php';

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        $return_arr = array();
        $query = "SELECT * FROM `money_in_19_20`";
        $result = mysqli_query($conn,$query);

        while($row = mysqli_fetch_array($result)){
            $name = $row['Name'];
            $amount = $row['Amount'];

            $return_arr[] = array("Name" => $name,
                              "Amount" => $Amount);
        }

        // Encoding array in JSON format
        echo json_encode($return_arr);
    }
}

Данные Json принимаются в формате

{"Имя":"Опасность","Сумма":"103000000"}

Привет, вы не проанализировали свой json, то есть: JSON.parse(response); внутри функции успеха, затем используйте то же самое или установите dataType просто 'json ', чтобы он автоматически конвертировался.

Swati 20.12.2020 14:37

Почитайте немного о jQuery AJAX и о том, как разместить параметры в нужном месте Learn.jquery.com/ajax/jquery-ajax-methods

RiggsFolly 20.12.2020 14:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
133
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы возвращаете объект как имя, количество и проверяете как имя, количество

var name = response[i].name;
var amount = response[i].amount;

должен быть

var name = response[i].Name;
var amount = response[i].Amount;

Большое спасибо за Вашу помощь. Это заполнило мою таблицу. Однако теперь, если я нажму на кнопку дважды. Теперь данные появятся в таблице дважды. Можно ли как-то решить эту проблему? Еще раз спасибо. Я очень благодарен за вашу помощь

Sam_West 20.12.2020 15:12

Вместо jQuery .append() вы можете использовать .html()

Akram Hossain 20.12.2020 15:28

Однако я попытался использовать .html(), который затем добавляет только нижнюю строку данных вместо всего этого. Спасибо за предложение.

Sam_West 20.12.2020 15:37
var html = ""; for (var i = 0; i < len; i++) { var name = response[i].Name; var amount = response[i].Amount; var tr_str = "<tr>" + "<td align='center'>" + (i + 1) + "</td>" + "<td align='center'>" + name + "</td>" + "<td align='center'>" + amount + "</td>" + "</tr>"; html+=tr_str; //$("#money_in").append(tr_str); } $("#money_in").html(html);
Akram Hossain 20.12.2020 15:56

Я использовал ваш код выше. Теперь заголовки больше не отображаются. Как это исправить?

Sam_West 20.12.2020 15:59

попробуй это <table> <thead> <tr> <th>Name</th> <th>Amount(Million £)</th> </tr> </thead> <tbody id = "money_in"> </tbody> </table>

Akram Hossain 20.12.2020 16:01

Большое спасибо. Это решило мою проблему.

Sam_West 20.12.2020 16:06

Другие вопросы по теме