重定向到 json 响应中的 URL

Question

我有两个文件 fetch.php 和 index.php。fetch.php 文件进行搜索并将结果转换为 Json。Index.php 具有循环遍历 Json 结果的 Jquery。其中一个单元格包含一个 URL。如何让用户重定向到 URL。//index.php==============================<script>$(document).ready(function(){ function load_data(query) {  $.ajax({   url:"fetch.php",   method:"POST",   data:{query:query},   dataType:"json",   success:function(data)   {    $('#total_records').text(data.length);    var html = '';    if(data.length > 0)    {     for(var count = 0; count < data.length; count++)     {      html += '<hr>';      html += '<tr>';      html += '<div>'+data[count].title+'</div>';      html += '<td>'+data[count].book+'</td><tr/>';       html += '<br/><td>'+data[count].description+'</td><tr/>';      html += '<td><button> VIEW </button> '+data[count].url+'</td>'; //Is there a way to redirect to this URL by clicking on the VIEW button       html += '<hr>';     }    }    else    {     html = '<tr><td colspan="5">No Data Found</td></tr>';    }    $('tbody').html(html);   }  }) } $('#search').click(function(){  var query = $('#search_id').val();  load_data(query); });</script>

Answer 1

简单的解决方案：

html += '<td><button onclick="window.location.href=\''+data[count].url+'\'"> VIEW </button> '+data[count].url+'</td>';

Answer 2

考虑以下建议：

$(function() {

  function load_data(q) {

    $.ajax({

      url: "fetch.php",

      method: "POST",

      data: {

        query: q

      },

      dataType: "json",

      success: function(data) {

        $('#total_records').text(data.length);

        var row;

        if (data.length > 0) {

          $.each(data, function(k, d) {

            row = $("<tr>");

            $("<td>").html(d.title).appendTo(row);

            $("<td>").html(d.book).appendTo(row);

            $("<td>").html(d.description).appendTo(row);

            var e = $("<td>").appendTo(row);

            $("<button>").html("VIEW").click(function(e) {

              window.location.href = d.url;

            }).appendTo(e);

          });

        } else {

          row = $("<tr>");

          $("<td>", {

            colspan: 4

          }).html("No Results Found.").appendTo(row);

        }

      }

    });

  }

  $('#search').click(function() {

    var query = $('#search_id').val();

    load_data(query);

  });

});

如您所见，这使用了更多的 jQuery 部件来帮助精简您的代码。此外，当按钮被创建并添加到表中时，我们会创建一个 Click 事件回调。

你有很多不正确的 HTML 语法。我的例子没有复制这一点。行元素应该包含单元格而不是其他元素。是的，你可以做到，但这不是一个好习惯。这就是我删除它们的原因。如果出于某种原因需要它们，您应该提供一个更完整的示例，以便清楚为什么需要它们。