window.location.href를 사용하여 게시 데이터 전달

window.location.href를 사용하여 게시 데이터 전달

window.location을 사용하는 경우.href, 제가 여는 새 페이지에 POST 데이터를 전달하고 싶습니다.자바스크립트와 jQuery를 사용하여 이것이 가능합니까?

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를 사용하여 이러한 값을 채웁니다(물론 자바스크립트를 사용하여 유사한 작업을 수행할 수도 있습니다).

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

그런 다음 마지막으로 양식을 제출합니다.

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

서버 쪽에서 당신은 확인을 통해 당신이 보낸 데이터를 얻을 수 있을 것입니다.var1그리고.var2이 작업을 수행하는 방법은 사용 중인 서버 측 언어에 따라 다릅니다.

용사를 합니다.window.location.hrefPOST 요청을 보낼 수 없습니다.

당신이 해야 할 일은 다음을 설정하는 것입니다.form하여 데터필포태그된, 설정이를 합니다.action 및 에 methodPOST한 다음 POST를 합니다.submit에 있는 form꼬리표를 달다

다른 답변에서 언급했듯이 window.location을 사용하여 POST를 요청할 수 없습니다.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

다음 파일 사용: "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 을 참조하십시오.

간단한 대답: 아니요.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">은 제된이다같음습다니과름은출▁be다▁will같니▁the습▁submitted▁name다입니다.login_name.
• 변경할 수 .nameJoiner이▁▁than가 아닌 다른 에 대한 ._입력 이름 지정 체계와 충돌하지 않습니다.
• 필요한 양식을 모두 가져왔으면 다음을 수행합니다.submitMe.submit();

단순히 로컬/세션 스토리지를 사용하는 것을 고려해 보셨습니까?-또는 - 빌드하는 항목의 복잡성에 따라 인덱스 DB를 사용할 수도 있습니다.

참고:

Local storage그리고.indexDB보안이 되지 않습니다. 따라서 중요한/개인 데이터(예: 이름, 주소, 전자 메일 주소, DOB 등)를 저장하지 않도록 해야 합니다.

Session Storage항목을 설정한 오리진에만 액세스할 수 있으며 브라우저/탭을 닫자마자 지워집니다.

IndexDB조금 더 [하지만 그 이상은 아닙니다] 그리고 입니다.30MB noSQL database모든 브라우저에 내장되어 있습니다(그러나 사용자가 선택하면 기본적으로 무제한이 될 수 있습니다). -> 다음에 Google 문서를 사용할 때 DevTools -> application -> 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알아요, 그냥 재미로.

이것처럼 간단합니다.

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

중요한 데이터를 사용자로 전달해야 하는 애플리케이션의 화면 잠금과 그가 작업하는 URL을 만들기 위해 이 문제를 해결해야 했습니다.그런 다음 이 코드를 실행하는 함수를 만듭니다.

저는 이것에 대해 매우 다른 접근법을 사용합니다.설정한 후 1초 후에 만료되는 클라이언트에서 브라우저 쿠키를 설정합니다.window.location.href.

이것은 URL에 매개 변수를 포함하는 것보다 훨씬 안전합니다.

서버는 매개변수를 쿠키로 수신하고 브라우저는 쿠키를 보낸 후 즉시 삭제합니다.

const expires = new Date(Date.now() + 1000).toUTCString()
document.cookie = `oauth-username=user123; expires=${expires}`
window.location.href = `https:foo.com/oauth/google/link`

패스 대신 GET를 사용할 수 있지만 중요한 값에는 이 방법을 사용하지 마십시오.

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

고객 바구니에 있습니다.php

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

언급URL : https://stackoverflow.com/questions/2367979/pass-post-data-with-window-location-href