передавати дані публікації з window.location.href


113

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


11
Налаштування window.location.hrefGET запит нової URL-адреси, а не POST.
Chetan S

Відповіді:


85

Використання window.location.hrefнеможливо надіслати запит POST.

Що вам потрібно зробити, це встановити formтег із полями даних у ньому, встановити actionатрибут форми на URL, а methodатрибут на POST, а потім викликати submitметод на formтезі.


У мене є дані, що надходять із 3 різних форм, і я намагаюся надсилати всі 3 форми на одну і ту ж сторінку, тому я намагався серіалізувати форми з jQuery та надсилати їх іншим способом
Брайан,

@Brian: Ви не можете просто поставити все в одне form, так що все надсилається разом автоматично?
Марсель Корпель

Одна форма знаходиться у діалоговому вікні 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як це зробити, залежить від того, якою мовою на серверній основі ви користуєтесь.


коли я це роблю, я отримую браузер для переадресації на домен / невизначений. Що я роблю неправильно?
vigamage


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


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">по прибуттю <form name="login">, подане ім'я буде login_name.
  • Ви можете змінити nameJoinerзмінну на щось інше, _щоб вона не суперечила вашій схемі іменного введення.
  • Коли ви імпортуєте всі необхідні форми, зробіть це submitMe.submit();

4

це так просто, як це

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

Мені довелося це вирішити, щоб зробити блокування екрана моєї програми, куди я мав передавати конфіденційні дані як користувач та URL, де він працював. Потім створіть функцію, яка виконує цей код


1
Або у done()наборі функційwindow.location.href
Chris Edwards

Так @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... знаєте, тільки для ударів.


-4

Ви можете використовувати GET замість проходу, але не використовувати цей метод для важливих значень,

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

У CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>

3
його GET метод, але питання - метод POST приятель
Thamaraiselvam

@thamaraiselvam Kissa Mia, можливо, не добре сформулювала відповідь, але вірна щодо маршруту GET тут. Питання не пов'язане з використанням методу POST - користувач просто запитав, чи існує спосіб приймати дані POST та надсилати їх через window.location.href. Спершу слід знати, що Window.location.href - це GET-запит. Ця відповідь не є помилковою - просто не буде просто масштабувати велику кількість полів форми, закодованих як QueryString. Однак найбільш очевидний спосіб передачі даних через URL-адресу (що можна змінити за допомогою window.location.href) - це параметри рядка запиту.
SylonZero

@SylonZero Ви не можете приєднати дані POST до GET-запиту. Вони є різними типами запитів, і дані виглядають по-різному в POST. Важливі частини специфікації HTTP досить короткі.
Colin vH

@ColinvH Вам потрібно уважніше прочитати те, що я написав. Версія TLDR: ви можете взяти дані, які будуть використані для генерації POST, і кодувати їх як параметри рядка запиту.
SylonZero
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.