获取值失败

Question

我是一名初学者开发人员，今天我尝试搜索 ajax 并得到以下结果。完成此操作后，如果您尝试运行它，您可以说“undefind”。我该如何解决这个问题？

这是您打字的地方。

<input id="word" type="text" placeholder="test type">

<input type="button" id="btn" value="click">

这是一个脚本。

 $("#btn").click(function search(target) {

    var word = target.value

      $.ajax({

          url : "url"+word, 

          dataType :"json",

          success : function(data) {

              var tb =$("<table />");

              for(var i in data);{

                  var $addr =data[i].addr;

                  var $code =data[i].cdoe;

                  var $created_at =data[i].created_at;

                  var $lat =data[i].lat;

                  var $lng =data[i].lng;

                  var $name =data[i].name;

                  var $stock_at =data[i].stock_at

                  var row =$("<tr />").append(

                      $("<td />").text($addr),

                      $("<td />").text($code),

                      $("<td />").text($created_at),

                      $("<td />").text($lat),

                      $("<td />").text($lng),

                      $("<td />").text($name),

                      $("<td />").text($stock_at),

                  );

                  tb.append(row);

              }

              $(".wrap").append(tb);

          },

     });

  });

Answer 1

我只是创建或使用通用 jQuery 插件函数将 JSON 数据转换为表元素。另外，我建议使用fetch而不是$.ajax，因为它返回一个承诺，并且它是获取 API 数据的更现代的方式。(($) => {&nbsp; $.jsonToTable = function() {&nbsp; &nbsp;let fields = Object.keys(data[0]);&nbsp; &nbsp;return $('<table>')&nbsp; &nbsp; &nbsp; .append($('<thead>').append($('<tr>')&nbsp; &nbsp; &nbsp; &nbsp; .append(fields.map(field => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return $('<th>').text(field);&nbsp; &nbsp; &nbsp; &nbsp; }))))&nbsp; &nbsp; &nbsp; .append($('<tbody>').append(data.map(record => {&nbsp; &nbsp; &nbsp; &nbsp; return $('<tr>').append(fields.map(field => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return $('<td>').text(record[field]);&nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; })));&nbsp; &nbsp; };})(jQuery)const data = [&nbsp; { addr : 1, code : 1, create_at : 1, lat : 1, lng : 1, name : 1, stock_at : 1 },&nbsp; { addr : 2, code : 2, create_at : 2, lat : 2, lng : 2, name : 2, stock_at : 2 },&nbsp; { addr : 3, code : 3, create_at : 3, lat : 3, lng : 3, name : 3, stock_at : 3 },&nbsp; { addr : 4, code : 4, create_at : 4, lat : 4, lng : 4, name : 4, stock_at : 4 }];$('.wrap').append($.jsonToTable(data)); // Or use the button click method below...$("#btn").click(function search(target) {&nbsp; var word = target.value;&nbsp; fetch("url" + word)&nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; .then(json => $('.wrap').append($.jsonToTable(json)));});table { border-collapse: collapse; margin-top: 1em; }table, th, td { border: thin solid grey; }th, td { padding: 0.33em; }thead tr { background: #D7D7D7 }tbody tr:nth-child(even) { background: #F7F7F7;&nbsp; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="word" type="text" placeholder="test type"><input type="button" id="btn" value="click"><div class="wrap"></div>