[javascript] window.location.href로 게시물 데이터 전달
window.location.href를 사용할 때 내가 열고있는 새 페이지에 POST 데이터를 전달하고 싶습니다. JavaScript 및 jQuery를 사용하여 가능합니까?
답변
사용 window.location.href
이하면 POST 요청을 보낼 수 없습니다.
해야 할 일은 form
데이터 필드가 있는 태그를 설정 action
하고 양식의 method
속성을 URL로, 속성을 POST로 설정 한 다음 태그 에서 submit
메서드 를 호출하는 것입니다 form
.
답변
다음과 같이 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
,이를 수행하는 방법은 사용중인 서버 측 언어에 따라 다릅니다.
답변
이 파일 사용 : “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 요청을 할 수있는 방법이 없으므로 양식을 만들고 즉시 제출할 수 있습니다.
이 기능을 사용할 수 있습니다.
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
답변
짧은 대답 : 아니요. 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();
답변
이만큼 간단합니다
$.post({url: "som_page.php",
data: { data1: value1, data2: value2 }
).done(function( data ) {
$( "body" ).html(data);
});
});
중요한 데이터를 사용자로 전달해야하는 애플리케이션의 화면 잠금과 그가 작업중인 URL을 만들기 위해이 문제를 해결해야했습니다. 그런 다음이 코드를 실행하는 함수를 만듭니다.
답변
단순히 로컬 / 세션 스토리지 사용을 고려해 보셨습니까? -또는-당신이 짓고있는 것의 복잡성에 따라; 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를 사용할 수 있습니다 .