Нужен совет по поводу jquery ajax - PullRequest
Новая
       1

Нужен совет по поводу jquery ajax

0 голосов
/ 19 марта 2020

Я хочу прочитать данные из файла json, используя ajax jquery, и отобразить их в виде таблицы в html. Это работает нормально. Но тогда я должен иметь возможность нажимать кнопку на каждом строка для отображения дочерних узлов каждой строки в виде предупреждения от функции showDetails, упомянутой ниже. Я не могу получить данные. Вместо этого в консоли выводится ошибка "childNode. html: 1 Uncaught ReferenceError: mylapore не определено в HTMLButtonElement.onclick (childNode. html: 1) ". TIA

childNode. html

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8">  
<title>Insert title here</title>
<style>
table {
    width: 50%;
}
th {
    background: #f1f1f1;
    font-weight: bold;
    padding: 6px;
}
td {
    background: #f9f9f9;
    padding: 6px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="application/javascript">

function myFunction(){
 $.ajax({
   url: 'childNode.json',
   type: 'GET',
   contentType: 'application/json; charset=utf-8',
   dataType: 'json',
    success: function(childNode) {
        //console.log(childNode);
        var length=childNode.length;
        for (var i=0; i<length; i++) {
            //alert("hii");
            console.log(childNode[i].cityDetails.area);
            var area=childNode[i].cityDetails.area;
            alert(area);
              var row = '<tr>'
                row+= '<td>'+ childNode[i].name+ '</td>'
                row+= '<td>'+ childNode[i].age+ '</td>'
                row+= '<td>'+ childNode[i].country+ '</td>'
                row+= '<td>'+ childNode[i].state + '</td>'
                row+= '<td>'+ childNode[i].city + '</td>'
                row+= '<td><button onclick="JavaScript:showDetails('+area+');">' + 'View Details' + '</button></td>'
                row+= '</tr>';
            $('#myTable').append(row); 
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
       // alert('Error: ' + textStatus + ' - ' + errorThrown);
    }
}); 
}
function showDetails(text)
{
    alert(text);
}
</script>
</head>
<body onload="myFunction();">
<table id="myTable">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>country</th>
        <th>state</th>
        <th>city</th>
        <th>action</th>
    </tr>
</table>
</body>
</html>

childNode. json

[
    {
        "name":"shruthy",
        "age":"31",
        "country":"india",
        "state":"tamilnadu",
        "city":"chennai",
        "cityDetails":
            {
                "area":"mylapore",
                 "station":"kilpauk"
            }

    },
    {
        "name":"arsha",
        "age":"31",
        "country":"india",
        "state":"tamilnadu",
        "city":"bengaluru",
        "cityDetails":
            {
                "area":"koramangala",
                 "station":"cantonment"
            }

    }
]

1 Ответ

0 голосов
/ 19 марта 2020

Во-первых, обратите внимание, что вы включаете jQuery несколько раз. Одна из ссылок может быть удалена.

Что касается проблемы, то она связана со значением в аргументе, который вы предоставляете функции, требующей кавычек вокруг нее. Правильный синтаксис был бы: 

row += '<td><button onclick="JavaScript:showDetails(\"' + area + '\");">' + 'View Details' + '</button></td>';

Однако гораздо лучший подход - избегать использования встроенных обработчиков событий, поскольку они являются плохой практикой из-за устаревания и отсутствия разделения интересов принцип. Вместо этого используйте делегированные обработчики событий. Как вы уже включили jQuery на странице, это будет выглядеть так: 

// mock AJAX response data:
let childNode = [{
  "name": "shruthy",
  "age": "31",
  "country": "india",
  "state": "tamilnadu",
  "city": "chennai",
  "cityDetails": {
    "area": "mylapore",
    "station": "kilpauk"
  }
}, {
  "name": "arsha",
  "age": "31",
  "country": "india",
  "state": "tamilnadu",
  "city": "bengaluru",
  "cityDetails": {
    "area": "koramangala",
    "station": "cantonment"
  }
}]

// inside success(childNode)
let html = childNode.map(n => {
  let row = '<tr>'
  row += '<td>' + n.name + '</td>'
  row += '<td>' + n.age + '</td>'
  row += '<td>' + n.country + '</td>'
  row += '<td>' + n.state + '</td>'
  row += '<td>' + n.city + '</td>'
  row += '<td><button class="showdata" data-area="' + n.cityDetails.area + '">View Details</button></td>'
  row += '</tr>';
  return row;
});
$('#myTable').append(html);

// somewhere outside the AJAX call:
$('#myTable').on('click', '.showdata', function() {
  console.log($(this).data('area'));
});
table {
  width: 50%;
}

th {
  background: #f1f1f1;
  font-weight: bold;
  padding: 6px;
}

td {
  background: #f9f9f9;
  padding: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <th>name</th>
    <th>age</th>
    <th>country</th>
    <th>state</th>
    <th>city</th>
    <th>action</th>
  </tr>
</table>

Вот полный пример, показывающий всю структуру HTML: 

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8">
  <title>Insert title here</title>
  <style>
    /* NOTE: This should be in an external .css file */
    
    table {
      width: 50%;
    }
    
    th {
      background: #f1f1f1;
      font-weight: bold;
      padding: 6px;
    }
    
    td {
      background: #f9f9f9;
      padding: 6px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="application/javascript">
    jQuery($ => {
      $('#myTable').on('click', '.showdata', function() {
        console.log($(this).data('area'));
      });

      $.ajax({
        url: 'childNode.json',
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function(childNode) {
          let html = childNode.map(n => {
            let row = '<tr>'
            row += '<td>' + n.name + '</td>'
            row += '<td>' + n.age + '</td>'
            row += '<td>' + n.country + '</td>'
            row += '<td>' + n.state + '</td>'
            row += '<td>' + n.city + '</td>'
            row += '<td><button class="showdata" data-area="' + n.cityDetails.area + '">View Details</button></td>'
            row += '</tr>';
            return row;
          });
          $('#myTable').append(html);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          // alert('Error: ' + textStatus + ' - ' + errorThrown);
        }
      });
    });
  </script>
</head>

<body>
  <table id="myTable">
    <tr>
      <th>name</th>
      <th>age</th>
      <th>country</th>
      <th>state</th>
      <th>city</th>
      <th>action</th>
    </tr>
  </table>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...