program tip

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

radiobox 2020. 8. 15. 09:00
반응형

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


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


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

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


다음과 같이 HTML에 양식을 추가하십시오.

<form style="display: hidden" 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,이를 수행하는 방법은 사용중인 서버 측 언어에 따라 다릅니다.


짧은 대답 : 아니요. 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();

이 파일 사용 : "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를


As it was said in other answers there is no way to make a POST request using window.location.href, to do it you can create a form and submit it immediately.

You can use this function:

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


it's as simple as this
$.post( "som_page.php", { data1: value1 , data2: value2 .... } ).done(function( data ) { $( "body" ).html(data);});
I had to solve this to make a screen lock of my application where I had to pass sensitive data as user and the url where he was working. Then create a function that executes this code


Have you considered simply using Local/Session Storage? -or- Depending on the complexity of what you're building; you could even use indexDB.

note:

Local storage and indexDB are not secure - so you want to avoid storing any sensitive / personal data (i.e names, addresses, emails addresses, DOB etc) in either of these.

Session Storage is a more secure option for anything sensitive, it's only accessible to the origin that set the items and also clears as soon as the browser / tab is closed.

IndexDB is a little more [but not much more] complicated and is a 30MB noSQL database built into every browser (but can be basically unlimited if the user opts in) -> next time you're using Google docs, open you DevTools -> application -> IndexDB and take a peak. [spoiler alert: it's encrypted].

Focusing on Local and Session Storage; these are both dead simple to use:

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

If simple is not your thing -or- maybe you want to go off road and try a different approach all together -> you can probably use a shared web worker... y'know, just for kicks.


You can use GET instead of pass, but don't use this method for important values,

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

In the CustomerBasket.php

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

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

반응형