Question

我试图用JQuery创建一个函数，当我单击按钮时，将用户带到新的html页面，然后修改页面的内容（仅作为练习）。但是，尽管该功能确实将用户带到了新页面，但是它并没有使用新标签等修改html。我在做什么错了？

这是主页的HTML：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Generic name </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
  </head>

  <body>
    <header>
      <h1> GUI test </h1>
      <h6> beta </h6>
    </header>

    <main id="data-container">
      Loading...
    </main>


  <script src="https://code.jquery.com/jquery-2.2.1.min.js"
              integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
              crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
              integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
              crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
              integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
              crossorigin="anonymous"></script>
      <script src="/RandomColor.js"></script>
      <script src="/ToCardInfo.js"></script>
      <script src="/client.js"></script>


  </body>

</html>

以 /client.js 脚本结尾，使用以下按钮修改此主页的内容以添加元素：

  $('<button class="Gallery-Button" OnClick="TakeToCardInfo(this.id)">See More..</button>').attr('id', record.id).appendTo($galleryCard);

当用户单击按钮时，将调用主页中 /ToCardInfo.js 脚本中的以下功能，

function TakeToCardInfo(id){
  $(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id);
  var $dataContainer = $('#container-A');
  $dataContainer.html('');
};

此功能将用户发送到以下HTML页面：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Test </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
  </head>

  <body>

    <header>
      <h1>TRIAL</h1>
    </header>

    <main id="container-A"> Loading too... </main>

    <script src="https://code.jquery.com/jquery-2.2.1.min.js"
                integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
                crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
                integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
                crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
                crossorigin="anonymous"></script>
        <script src="/ToCardInfo.js"></script>


    </body>

  </html>

但是正在加载... 消息永不消失，主标签也从未清空。我究竟做错了什么？

Answer 1

致电时

$(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id);

它将刷新您的页面以及这两行

var $dataContainer = $('#container-A');
$dataContainer.html('');

永远不会运行。

页面重新加载时，您的.js文件也会被重新加载。

在新页面中，如果要读取用户ID，可以使用此功能

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0; i < vars.length; i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

因此在新页面中，当您需要在函数上方调用的用户ID

getQueryVariable('user') 它会为您返回ID。

您可以阅读更多here

Answer 2

如前所述，在脚本进行重定向后，您将无法在该行之后运行任何内容。

您需要重定向页面才能完成其余工作。

您的重定向可以添加另一个参数来确定其他页面必须执行的操作，例如：

var="$(cat ssh_get_data_QA_machine.py | ssh con-qa-1010 'python')
echo $var

在另一页上，您需要检测该参数。可以通过执行以下操作来解析URL中的参数（基于此question）：

function TakeToCardInfo(id){
  $(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id + '&run=something');
};

然后您可以使用run参数来定义要加载的函数：

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

if (params.run == "cleanup") cleanup();在这种情况下包含您想先运行的内容：

Cleanup()

Answer 3

这样做

function TakeToCardInfo(id){
  $(window).attr("location", 'http://eaf10176.ngrok.io/About?user=' + id);
  var $dataContainer = $('#container-A');
  $dataContainer.empty();
};

使用相同的jQuery脚本重定向和修改新页面

3 个答案: