window.location.href로 게시물 데이터 전달


113

window.location.href를 사용할 때 내가 열고있는 새 페이지에 POST 데이터를 전달하고 싶습니다. JavaScript 및 jQuery를 사용하여 가능합니까?


11
설정 window.location.href은 POST가 아닌 새 URL에 대한 GET 요청을 수행합니다.
Chetan S

답변:


85

사용 window.location.href이하면 POST 요청을 보낼 수 없습니다.

해야 할 일은 form데이터 필드가 있는 태그를 설정 action하고 양식의 method속성을 URL로, 속성을 POST로 설정 한 다음 태그 에서 submit메서드 를 호출하는 것입니다 form.


나는 3 개 가지 형태에서 오는 데이터를 가지고 내가 jQuery로 양식을 직렬화하기 위해 노력했습니다, 그래서 같은 페이지에 3 개 형태를 보내려고 그들에게 다른 방법으로 전송하고
브라이언

@Brian : 모든 것을 하나에 넣으면 모든 것이 form자동으로 함께 전송됩니다.
Marcel Korpel

하나의 양식이 jQueryUI 대화 상자에 있으므로 모두 포함 할 수는 없습니다.
브라이언

12
모든 값을 가져 와서 세 가지 양식의 모든 필드가있는 양식을 동적으로 작성하고 해당 양식을 제출하십시오. 양식이 보이지 않을 수 있습니다. JQuery AJAX 메서드를 사용하지 말고 $("#myForm").submit(). 표시되지 않고 사용자 입력이 아닌 클라이언트 측 코드에서 값을 제출하는 데만 사용되는 양식은 표시되거나 다른 방식으로 사용되지 않으며 페이지가 새로 고쳐집니다.
Matt Luongo

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

다른 답변에서 말했듯이 window.location.href를 사용하여 POST 요청을 할 수있는 방법이 없으므로 양식을 만들고 즉시 제출할 수 있습니다.

이 기능을 사용할 수 있습니다.

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.hrefPOST 데이터를 전달할 수 없습니다.

다소 만족스러운 답변 :이 기능을 사용하여 모든 양식 데이터를 복제하고 제출할 수 있습니다.

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();

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 게시물의 반환 데이터를 사용하려고합니다. 누군가에게 도움이 되길 바랍니다.
Sergio Roldan

3

단순히 로컬 / 세션 스토리지 사용을 고려해 보셨습니까? -또는-당신이 짓고있는 것의 복잡성에 따라; indexDB를 사용할 수도 있습니다.

참고 :

Local storage그리고 indexDB안전하지 않습니다 - 당신은이 중 하나에 민감한 / 개인 정보 (예 : 이름, 주소, 이메일 주소, 생년월일 등)를 저장하지 않도록 할 수 있도록.

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킥을 위해 ... y'know를 사용할 수 있습니다 .


-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는 것을 알아야한다 IS GET 요청. 이 대답은 틀린 것이 아닙니다. QueryString으로 인코딩 된 많은 수의 양식 필드로 확장하기가 쉽지 않습니다. 그러나 URL을 통해 데이터를 보내는 가장 확실한 방법 (window.location.href로 변경할 수 있음)은 쿼리 문자열 매개 변수를 사용하는 것입니다.
SylonZero

@SylonZero GET 요청에 POST 데이터를 첨부 할 수 없습니다. 요청의 종류가 다르며 POST에서 데이터가 다르게 보입니다. HTTP 사양의 중요한 부분은 상당히 짧습니다.
Colin vH

@ColinvH 내가 쓴 내용을 더주의 깊게 읽어야합니다. TLDR 버전 : POST를 생성하는 데 사용할 데이터를 가져 와서 쿼리 문자열 매개 변수로 인코딩 할 수 있습니다.
SylonZero
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.