jQuery에 즉시 양식을 만들고 제출하는 방법이 있습니까?
아래와 같은 것.
<html>
<head>
<title> Title Text Goes Here </title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function(){alert('hi')});
$('<form/>').attr('action','form2.html').submit();
</script>
</head>
<body>
Content Area
</body>
</html>
이것이 작동해야하나요 아니면 다른 방법이 있나요?
답변:
코드에 두 가지 문제가 있습니다. 첫 번째 $(document).ready();는 요소를 생성하는 jQuery 개체를 포함 했지만 래핑하지 않은 것입니다.
두 번째는 사용하던 방법입니다. jQuery는 선택기 (또는 일반적으로 선택기를 배치 할 위치)가 생성하려는 요소로 대체 될 때 모든 요소를 생성합니다. 그런 다음 본문에 추가하고 제출하면됩니다.
$(document).ready(function(){
$('<form action="form2.html"></form>').appendTo('body').submit();
});
작동중인 코드는 다음과 같습니다 . 이 예제에서는 양식 요소를 추가한다는 것을 증명하기 위해 자동 제출이 아닙니다.
다음 은 자동 제출 기능 이 있는 코드입니다. 잘 작동합니다. Jsfiddle은 "form2.html"이 서버에 존재하지 않기 때문에 404 페이지로 이동합니다.
$(document).ready()블록 안에 포함해야하는 좋은 이유가 있습니다 . 브라우저가 DOM을 안전하게 변경할 수 있도록 보장합니다. 그렇지 않으면 IE6 / 7과 같은 까다로운 브라우저가 전체 페이지가로드되기 전에 변경하려고하면 더미를 뱉어냅니다.
예, 가능합니다. 솔루션 중 하나는 다음과 같습니다 ( jsfiddle as a proof ).
HTML :
<a id="fire" href="#" title="submit form">Submit form</a>
(위에는 양식이 없습니다 참조)
자바 스크립트 :
jQuery('#fire').click(function(event){
event.preventDefault();
var newForm = jQuery('<form>', {
'action': 'http://www.google.com/search',
'target': '_top'
}).append(jQuery('<input>', {
'name': 'q',
'value': 'stack overflow',
'type': 'hidden'
}));
newForm.submit();
});
위의 예제는 양식 작성 방법, 입력 추가 방법 및 제출 방법을 보여줍니다. 때때로 결과 표시가에서 금지되어 X-Frame-Options있으므로 기본 창의 내용을 대체하는로 설정 target했습니다 _top. 또는을 설정하면 _blank새 창 / 탭에 표시 될 수 있습니다.
submit()호출하는 것입니다. 양식과 요소를 만드는 방법을 보여주기 위해 의도적으로 긴 양식 생성 코드를 제공했습니다. 나는 이것이 꽤 괜찮다고 믿는다.
'method': post하여 수행하십시오.
jQuery가없는 My 버전, 간단한 기능을 즉시 사용할 수 있습니다.
함수:
function post_to_url(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();
}
용법:
post_to_url('fullurlpath', {
field1:'value1',
field2:'value2'
}, 'post');
Josepmra 예제는 내가 필요한 것에 잘 맞습니다. 하지만 나는 줄을 추가해야했다
form.appendTo( document.body )
작동합니다.
var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");
var input = $("<input>")
.attr("type", "hidden")
.attr("name", "mydata")
.val("bla" );
$(form).append($(input));
form.appendTo( document.body )
$(form).submit();
예, 따옴표를 잊어 버렸습니다 ...
$('<form/>').attr('action','form2.html').submit();
<body>작동을 시작하기 전에 추가해야합니다 .
Content-Disposition: Attachment;다운로드를 강제 하는 서버 측 헤더가 부족합니다 .
Content-Type: application/octet-stream;. 도있다 download앵커의 속성은 ... 클라이언트 측 일 ( davidwalsh.name/download-attribute )