передать данные публикации с помощью window.location.href

113

При использовании window.location.href я хотел бы передать данные POST на новую страницу, которую я открываю. возможно ли это с помощью JavaScript и jQuery?

Брайан
источник
11
Настройка window.location.hrefвыполняет запрос GET для нового URL-адреса, а не POST.
Chetan S

Ответы:

85

Используя window.location.hrefэто, невозможно отправить запрос POST.

Что вам нужно сделать, так это настроить formтег с полями данных в нем, установить actionатрибут формы на URL-адрес и methodатрибут на POST, а затем вызвать submitметод для formтега.

Guffa
источник
У меня есть данные, поступающие из трех разных форм, и я пытаюсь отправить все три формы на одну страницу, поэтому я пытался сериализовать формы с помощью jQuery и отправлять их другим способом
Брайан
@Brian: Разве ты не можешь просто собрать все в один form, чтобы все отправлялось вместе автоматически?
Марсель Корпель 03
Одна форма находится в диалоговом окне jQueryUI, поэтому я не могу просто включить их все.
Брайан
12
Вытащите все их значения, динамически создайте форму со всеми полями во всех трех формах и отправьте эту форму. Форма может быть невидимой. Не используйте метод JQuery AJAX, используйте $("#myForm").submit(). Форма, которая будет невидимой и будет использоваться только для отправки значений из вашего кода на стороне клиента, а не для ввода пользователем, никогда не будет отображаться или использоваться иным образом, а страница будет обновлена.
Мэтт Луонго,
79

Добавьте форму в свой HTML-код, примерно так:

<form style="display: none" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

и используйте JQuery для заполнения этих значений (конечно, вы также можете использовать javascript, чтобы сделать что-то подобное)

$("#var1").val(value1);
$("#var2").val(value2);

Затем, наконец, отправьте форму

$("#form").submit();

на стороне сервера вы должны иметь возможность получать данные, которые вы отправили, проверяя, var1и var2как это сделать, зависит от того, какой язык на стороне сервера вы используете.

Мохамед Хамис
источник
когда я это делаю, я заставляю свой браузер перенаправлять на домен / undefined. Что я делаю не так?
vigamage
9

Используйте этот файл: "jquery.redirect.js"

$("#btn_id").click(function(){
    $.redirect(http://localhost/test/test1.php,
        {
            user_name: "khan",
            city : "Meerut",
            country : "country"
        });
    });
});

см. https://github.com/mgalante/jquery.redirect

Мохд Тауовир Хан
источник
9

Как было сказано в других ответах, нет возможности сделать запрос POST с помощью window.location.href, для этого вы можете создать форму и немедленно отправить ее.

Вы можете использовать эту функцию:

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

https://stackoverflow.com/a/133997/2965158

Aquajet
источник
8

Короткий ответ: нет. window.location.hrefне может передавать данные POST.

Несколько более удовлетворительный ответ: вы можете использовать эту функцию для клонирования всех данных вашей формы и их отправки.

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}
  • Сделайте это submitMe.importFields(form_element);для каждой из трех форм, которые вы хотите отправить.
  • Эта функция добавит имя каждой формы к именам ее дочерних входов (если у вас есть <input name="email">in <form name="login">, отправленное имя будет login_name.
  • Вы можете изменить nameJoinerпеременную на что-то другое, кроме того, _чтобы это не противоречило вашей схеме именования входных данных.
  • После того, как вы импортировали все необходимые формы, выполните submitMe.submit();
Joequincy
источник
4

это так просто

$.post({url: "som_page.php", 
    data: { data1: value1, data2: value2 }
    ).done(function( data ) { 
        $( "body" ).html(data);
    });
});

Мне пришлось решить эту проблему, чтобы заблокировать экран моего приложения, где я должен был передать конфиденциальные данные как пользователь и URL-адрес, по которому он работал. Затем создайте функцию, которая выполняет этот код

Серджио Ролдан
источник
1
Или в done()наборе функцийwindow.location.href
Крис Эдвардс
Да @ChrisEdwards, в моем примере я пытаюсь использовать данные возврата из сообщения jquery. Надеюсь, что это будет кому-то полезно.
Серхио Ролдан
3

Рассматривали ли вы просто использование локального / сеансового хранилища? -или- В зависимости от сложности того, что вы создаете; вы даже можете использовать indexDB.

примечание :

Local storageи indexDBне являются безопасными - поэтому вы не хотите хранить какие-либо конфиденциальные / личные данные (например, имена, адреса, адреса электронной почты, DOB и т. д.) в любом из них.

Session Storage - более безопасный вариант для всего конфиденциального, он доступен только для источника, который установил элементы, а также очищается, как только браузер / вкладка закрывается.

IndexDBнемного сложнее [но не намного] сложнее и 30MB noSQL databaseвстроено в каждый браузер (но может быть практически неограниченным, если пользователь выбирает) -> в следующий раз, когда вы будете использовать документы Google, откройте DevTools -> приложение -> IndexDB и возьми пик. [предупреждение о спойлере: он зашифрован].

Сосредоточение внимания на Localи Session Storage; они оба очень просты в использовании:

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

Если простота не для вас - или - может быть, вы хотите съехать с дороги и попробовать другой подход все вместе -> вы, вероятно, можете использовать shared web worker... ну, просто для удовольствия.

Down_with_opp
источник
-4

Вы можете использовать GET вместо pass, но не используйте этот метод для важных значений,

function passIDto(IDval){    
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}   

В CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>
Кисса Миа
источник
3
его метод GET, но вопрос - приятель метода POST
Тамараисельвам
@thamaraiselvam Кисса Миа, возможно, не так хорошо сформулировала ответ, но права насчет маршрута GET здесь. Вопрос не связан с использованием метода POST - пользователь просто спросил, есть ли способ взять данные POST и отправить их через window.location.href. И сначала вы должны знать, что Window.location.href ЯВЛЯЕТСЯ запросом GET. Этот ответ не является неправильным - масштабировать до большого количества полей формы, закодированных как QueryString, будет непросто. Однако наиболее очевидный способ отправки данных по URL-адресу (который вы можете изменить с помощью window.location.href) - это параметры строки запроса.
SylonZero
@SylonZero Вы не можете прикрепить данные POST к запросу GET. Это разные типы запросов, и данные в POST выглядят по-разному. Важные части спецификации HTTP довольно короткие.
Colin
@ColinvH Вам нужно внимательно прочитать то, что я написал. Версия TL; DR: вы можете взять данные, которые будут использоваться для генерации POST, и закодировать их как параметры строки запроса.
SylonZero