Блог

Главная - Вопросы по программированию - Передавать значения со страницы 1 на страницу 2 с помощью href и Javascript?

Передавать значения со страницы 1 на страницу 2 с помощью href и Javascript?

#javascript #html #href #url-parameters

#javascript #HTML #href #url-параметры

Вопрос:

В этом проекте пользователь нажимает ссылку электронной почты на сайт:

 example.com/video1?Id=12345amp;Email=email@email.com

На странице у меня есть код для получения пользовательских значений для Id и Email…

 <script>
const params = new URLSearchParams(document.location.search);
const Id1 = params.get("Id");
const Email1 = params.get("Email");
</script>

Я бы хотел, чтобы пользователь щелкнул ссылку…

Таким образом, значения для Id1 и Email1 передаются в example.com/video2 …

Я написал строку…

<a href="example.com/video2/?Id=Id1amp;Email=Email1"/a> И это не сработало…

Затем написал

<a href="example.com/video2/?Id=" Id1 "amp;Email="Email1 /a>

И это не сработало…

Может кто-нибудь помочь мне понять правильный код для добавления, чтобы я мог передать параметры на следующую страницу сайта?

Спасибо!

Ответ №1:

Вы можете попробовать вызвать окно.Расположение

вот так

 <a href="#" onclick="RedirectURL();return false;"> My link </a>
<script>
  const params = new URLSearchParams(document.location.search);
  const Id1 = params.get("Id");
  const Email1 = params.get("Email");

  function RedirectURL() {
    window.location = createDynamicURL();
  }

  function createDynamicURL() {
    //The variable to be returned
    var URL = "example.com/video1";
    URL  = "?id="   Id1;
    URL  = "amp;Email="   Email1
    return URL;
  }
</script>

Ответ №2:

Это должно сработать:

 <!DOCTYPE html>
<html>
<body>
<a href="#" onclick="openUrl()">Open</a>
<script>
    //const params = new URLSearchParams(document.location.search);
    //const Id1 = params.get("Id");
    //const Email1 = params.get("Email");
    const Id1 ="id1234";
    const Email1 = "someone@email.com";

    function openUrl() {
      //window.location="http://example.com/video2/?Id="   Id1   "amp;Email="   Email1;
      // more readable
      window.location=`http://example.com/video2/?Id=${Id1}amp;Email=${Email1}`;
    }
</script>
</body>
</html>

Используйте window.open() , если вы хотите открыть новую страницу.

Ответ №3:

Код JavaScript:

 const takeMeThere =()=>window.location.assign(`http://example.com/video2/?Id=${Id1}amp;Email=${Email1}`);

HTML:

 <a href="#" onclick="takeMeThere()">Click Here</a>

И если вы хотите открыть его в новом окне, просто установите target="_blank" значение a tag .

Решение с помощью jquery:

Сначала установите an id для этого a тега, я его устанавливаю "me" , затем это код

 $(document).ready(()=>{
   $("#me").attr("href", `http://example.com/video2/?Id=${Id1}amp;Email=${Email1}`)
})

HTML:

Свяжите jquery со своей страницей

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Затем используйте это

 <a id="me" href="#">Click me</a>

Комментарии:

1. Пошел с этим подходом. Очень признателен! Один вопрос… Теперь ссылка переходит через параметры на следующую страницу… НО если я щелкну правой кнопкой мыши, чтобы открыть новую вкладку / окно, загружается текущая страница… Есть ли способ, чтобы этого не произошло?

2. Да, вы можете решить эту проблему с помощью jquery, я редактирую свой ответ с помощью кода jquery

3. Спасибо за это! Чрезвычайно полезно и благодарно за проделанную работу. еще 1 продолжение… Таким образом, я частично упростил проблему… На самом деле на странице есть несколько ссылок на это место назначения… id отлично работает, но сейчас я создаю «me1», «me2», «me3″….. Есть ли способ выполнить эту настройку идентификатора, но для многократного использования на странице без необходимости каждый раз создавать уникальный идентификатор?

4. Так или иначе, все можно сделать так, как нам нужно, идея не является предварительно фиксированной, она генерируется после прослушивания историй. Разместите здесь короткую историю вашего проекта, если у меня появится какая-либо идея, я отправлю вам ссылку на чат, чтобы решить ее вместе

5. И если приведенный выше ответ решает вашу первую упомянутую проблему, также, пожалуйста, отметьте этот ответ как решение (с пометкой, с которой начинается ответ)