在不使用表单的情况下，使用javascript将来自服务器的数据从一页传递到另一页

Question

我对javascript没有太多的了解，也没有遇到任何问题。 我的数据来自服务器，而用户在单击某个项目时将其重定向到一个包含该项目所有详细信息的新页面。 问题是当用户单击一个项目时，如何将数据从一页发送到下一页。 没有使用PHP。 使用的javascript ajax jquery和数据来自json

这是一种格式，当用户单击“播放”按钮时，应显示新的年龄，并在该年龄下向用户显示数据。

Template={"Big_Display_Template": '{{#items}}<input type="hidden" name="guid" value="{{id}}"><div class="hero" 
style="background-image:url({{videoStillURL}})"><div class="hero-content"><br>
<h2>{{name}}</h2> <p>{{shortDescription}}</p> <div class="hero-links"><a href="Watch_Live.html"      
onclick="PassDataToNextPage({{name}},{{id}},{{shortDescription}});">
Play<span class="genericon genericon-play"> </span></a></div> 
<div class="hero-links-fav"><a href="#">Favourite<span class="genericon genericon-fav"> 
</span></a></div></div></div>{{/items}}'
}

这是我的函数PassDataToNextPage（）

    function PassDataToNextPage(name,guid,Description)
    {
        var url = 'Watch_Live.html';

        $.ajax({
        url: url,
        type: 'POST',
        data: 'name=' + name + '&guid=' + guid + '&shortDescription=' + Description,

success: function(result) {
     dataUrl=data;

    }
});
        return window.location+"/"+dataUrl;
    }

我知道这是错误的，但是如何使其正确？ 提前非常感谢

Answer 1

问题出在return window.location+"/"+dataUrl; 行：重定向应该在success函数内完成，因为它将在请求完成时被调用：

function PassDataToNextPage(name,guid,Description)
{
  var url = 'Watch_Live.html';

  $.ajax({
    url: url,
    type: 'POST',
    data: 'name=' + name + '&guid=' + guid + '&shortDescription=' + Description,
    success: function(result) {
      dataUrl = data;
      window.location = window.location + "/" + dataUrl;
    }
  });
}

在模板中，您必须在onclick属性中添加return false ，以避免链接后的浏览器中断您的处理程序：

<a href="Watch_Live.html" onclick="PassDataToNextPage({{name}},{{id}},{{shortDescription}});return false">

Answer 2

看起来您想要传递数据并转到包含数据的下一页，您不需要ajax即可实现。 只是：

function PassDataToNextPage(name,guid,Description)
{
    var url = 'Watch_Live.html';
    window.location.href = url + '?name=' + name + '&guid=' + guid + '&shortDescription=' + Description;
}

评论：

1. 您可以使用：

   <a onclick =“ PassDataToNextPage（{{name}}，{{id}}，{{shortDescription}}）;”>播放</ a>

click事件将由onclick中的PassDataToNextPage函数处理。

2. 假设您在下一页中使用PHP，则可以获取数据

   $ name = $ _GET ['name']; $ guid = $ _GET ['guid']; $ shortDesc = $ _GET ['shortDescription'];

Answer 3

您可以通过url GET参数传递key：value数据。 例如：如果要将数据传递到此页面：Watch_Live.html，则可以执行以下操作：

<a href="Watch_Live.html?name=someName&guid=you_guid"><button>Pass data</button></a>

要解析另一页中的参数，请阅读对类似问题的此答案。 https://stackoverflow.com/a/901144/4440845