페이지를 다시로드하지 않고 양식 제출
구인 웹 사이트가 있는데 광고가 게재되는 페이지에 "친구에게 팁 보내기"양식을 만들고 있습니다.
따라서 원하는 사람은 친구에게 이메일 주소로 광고 팁을 보낼 수 있습니다.
양식이 PHP 페이지에 제출되어야한다고 생각합니다. 맞습니까?
<form name='tip' method='post' action='tip.php'>
Tip somebody: <input name="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
<input type="submit" value="Skicka Tips"/>
<input type="hidden" name="ad_id" />
</form>
양식을 제출할 때 페이지가 새로 고침됩니다 ... 원하지 않습니다 ...
다시로드하지 않고 메일을 보낼 수있는 방법이 있습니까? 바람직하게는 ajax 또는 jquery없이 ...
감사
페이지를 다시로드하지 않고 이메일을 보내려면 ajax 요청을 제출해야합니다. http://api.jquery.com/jQuery.ajax/를 살펴보십시오.
코드는 다음과 같은 내용이어야합니다.
$('#submit').click(function() {
$.ajax({
url: 'send_email.php',
type: 'POST',
data: {
email: 'email@example.com',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
양식은 send_email.php요청을 처리하고 이메일을 보내야하는 페이지에 백그라운드로 제출됩니다 .
더 쉬운 방법이라고 생각하는 것을 찾았습니다. 페이지에 Iframe을 넣으면 액션의 이탈을 리디렉션하여 표시 할 수 있습니다. 물론 아무것도 할 수 없습니다. 이 경우 iframe 표시를 없음으로 설정할 수 있습니다.
<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
<input type="submit" value="Skicka Tips">
<input type="hidden" name="ad_id" value="2">
</form>
AJAX를 사용하거나
- iframe 생성 및 문서에 추가
- iframe 이름을 'foo'로 설정
- 양식 대상을 'foo'로 설정
- 제출
- 양식 작업이 'parent.notify (...)'로 자바 스크립트를 렌더링하여 피드백을 제공하십시오.
- 선택적으로 iframe을 제거 할 수 있습니다.
가장 빠르고 쉬운 방법은 iframe을 사용하는 것입니다. 페이지 하단에 프레임을 넣으십시오.
<iframe name="frame"></iframe>
그리고 당신의 형태로 이것을하십시오.
<form target="frame">
</form>
CSS에서 프레임을 보이지 않게 만듭니다.
iframe{
display: none;
}
이것은 당신의 문제를 해결해야합니다.
제출 버튼을 클릭 한 후이 코드에서 jquery ajax를 호출하고
POST / GET
데이터 유형 을 게시하기 위해 URL을 전달 합니다. 데이터 정보는 입력 필드 또는 기타를 선택할 수 있습니다.
sucess : 서버
함수 매개 변수 텍스트, html 또는 json 에서 모든 것이 정상이면 콜백 , 서버의 응답
이 성공하면받은 데이터가 일종의 상태에 있으면 경고를 쓸 수 있습니다. 또는 다음에 수행 할 작업을 코드를 실행하십시오.
<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
<input type="submit" id="submit" value="Skicka Tips"/>
<input type="hidden" id="ad_id" name="ad_id" />
</form>
<script>
$( "#tip" ).submit(function( e ) {
e.preventDefault();
$.ajax({
url: tip.php,
type:'POST',
data:
{
tip_email: $('#tip_email').val(),
ad_id: $('#ad_id').val()
},
success: function(msg)
{
alert('Email Sent');
}
});
});
</script>
이것이 바로 jQuery 및 AJAX없이 작동 할 수있는 방법이며 간단한 iFrame을 사용하여 매우 잘 작동합니다. I LOVE IT는 Opera10, FF3 및 IE6에서 작동합니다. 올바른 방향을 알려주는 위의 포스터 덕분에 여기에 게시하는 유일한 이유입니다.
<select name="aAddToPage[65654]"
onchange="
if (bCanAddMore) {
addToPage(65654,this);
}
else {
alert('Could not add another, wait until previous is added.');
this.options[0].selected = true;
};
" />
<option value="">Add to page..</option>
[more options with values here]</select>
<script type="text/javascript">
function addToPage(iProduct, oSelect){
iPage = oSelect.options[oSelect.selectedIndex].value;
if (iPage != "") {
bCanAddMore = false;
window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
window.hiddenFrame.document.formFrame.submit();
}
}
var bCanAddMore = true;</script>
<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>
위에서 호출되는 페이지를 생성하는 PHP 코드 :
if( $_GET['p'] == 'addProductToPage' ){ // hidden form processing
if(!empty($_POST['iAddToPage'])) {
//.. do something with it..
}
print('
<html>
<body>
<form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
<input type="hidden" name="iProduct" value="" />
<input type="hidden" name="iAddToPage" value="" />
</form>
</body>
</html>
');
}
양식의 대상 속성을 숨겨진 iframe으로 설정하여 양식이 포함 된 페이지가 다시로드되지 않도록 할 수 있습니다.
파일 업로드 (AJAX를 통해 수행 할 수 없음)로 시도해 보았고 아름답게 작동했습니다.
jquery-ajax이 경우 도움을 받아야합니다 . 이 없으면 ajax현재 해결책이 없습니다.
먼저 양식이 제출 될 때 JavaScript 함수를 호출하십시오. 그냥 설정하십시오 onsubmit="func()". 함수가 호출 되더라도 제출의 기본 작업이 수행됩니다. 수행되는 경우 페이지 새로 고침 또는 리디렉션을 중지 할 방법이 없습니다. 따라서 다음 작업은 기본 동작을 방지하는 것입니다. 시작 부분에 다음 줄을 삽입합니다 func().
event.preventDefault()
이제 리디렉션 또는 새로 고침이 없습니다. 그래서, 당신은 단순히 ajax 전화를 func()걸고 전화가 끝났을 때 원하는 것을 할 수 있습니다.
예:
형태:
<form id="form-id" onsubmit="func()">
<input id="input-id" type="text">
</form>
자바 스크립트 :
function func(){
event.preventDefault();
var newValue = $('#input-field-id').val();
$.ajax({
type: 'POST',
url: '...',
data: {...},
datatype: 'JSON',
success: function(data){...},
error: function(){...},
});
}
페이지를 다시로드하지 않고 양식을 제출하고 동일한 페이지에서 제출 된 데이터의 결과를 가져옵니다.
이 문제를 해결하는 인터넷에서 찾은 코드 중 일부는 다음과 같습니다.
색인 파일 :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<script type="text/javascript">
function clickButton(){
var name=document.getElementById('name').value;
var descr=document.getElementById('descr').value;
$.ajax({
type:"post",
url:"server_action.php",
data:
{
'name' :name,
'descr' :descr
},
cache:false,
success: function (html)
{
alert('Data Send');
$('#msg').html(html);
}
});
return false;
}
</script>
<form >
<input type="" name="name" id="name">
<input type="" name="descr" id="descr">
<input type="submit" name="" value="submit" onclick="return clickButton();">
</form>
<p id="msg"></p>
server_action.php
<?php
$name = $_POST['name'];
$descr = $_POST['descr'];
echo $name;
echo $descr;
?>
태그 : php ajax jquery serverside
iFrame을 사용해 보셨습니까? 아약스가 없으며 원본 페이지가로드되지 않습니다.
제출 양식을 iframe 내부에 별도의 페이지로 표시 할 수 있으며 제출시 외부 / 컨테이너 페이지가 다시로드되지 않습니다. 이 솔루션은 어떤 종류의 ajax도 사용하지 않습니다.
I did something similar to the jquery above, but I needed to reset my form data and graphic attachment canvases. So here is what I came up with:
<script>
$(document).ready(function(){
$("#text_only_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
});
$("#pic_radio_button_id").click(function(){
$("#single_pic_div").show();
$("#multi_pic_div").hide();
});
$("#gallery_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").show();
});
$("#my_Submit_button_ID").click(function() {
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
var canvas=document.getElementById("canvas");
var canvasA=document.getElementById("canvasA");
var canvasB=document.getElementById("canvasB");
var canvasC=document.getElementById("canvasC");
var canvasD=document.getElementById("canvasD");
var ctx=canvas.getContext("2d");
var ctxA=canvasA.getContext("2d");
var ctxB=canvasB.getContext("2d");
var ctxC=canvasC.getContext("2d");
var ctxD=canvasD.getContext("2d");
ctx.clearRect(0, 0,480,480);
ctxA.clearRect(0, 0,480,480);
ctxB.clearRect(0, 0,480,480);
ctxC.clearRect(0, 0,480,480);
ctxD.clearRect(0, 0,480,480);
} });
return false;
}); });
</script>
That works well for me, for your application of just an html form, we can simplify this jquery code like this:
<script>
$(document).ready(function(){
$("#my_Submit_button_ID").click(function() {
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
} });
return false;
}); });
</script>
You will need to use JavaScript without resulting to an iframe (ugly approach).
You can do it in JavaScript; using jQuery will make it painless.
I suggest you check out AJAX and Posting.
if you're submitting to the same page where the form is you could write the form tags with out an action and it will submit, like this
<form method='post'> <!-- you can see there is no action here-->
A further possibility is to make a direct javascript link to your function:
<form action="javascript:your_function();" method="post">
...
The page will get reloaded if you don't want to use javascript
function Foo(){
event.preventDefault();
$.ajax( {
url:"<?php echo base_url();?>Controllername/ctlr_function",
type:"POST",
data:'email='+$("#email").val(),
success:function(msg) {
alert('You are subscribed');
}
} );
}
I tried many times for a good solution and answer by @taufique helped me to arrive at this answer.
NB : Don't forget to put event.preventDefault(); at the beginning of the body of the function .
Here is some jQuery for posting to a php page and getting html back:
$('form').submit(function() {
$.post('tip.php', function(html) {
// do what you need in your success callback
}
return false;
});
참고URL : https://stackoverflow.com/questions/2866063/submit-form-without-page-reloading
'developer tip' 카테고리의 다른 글
| REST-본문에 ID를 넣을까요? (0) | 2020.10.08 |
|---|---|
| Maven 종속성을 전역 적으로 제외하는 방법이 있습니까? (0) | 2020.10.08 |
| 첫 번째 선택을 제외한 모든 CSS3 선택자 질문 (0) | 2020.10.07 |
| Ubuntu에서 Maven이 설치된 위치 (0) | 2020.10.07 |
| 모든 열거 형에 StringEnumConverter를 적용하도록 Json.Net에 전역 적으로 알리는 방법 (0) | 2020.10.07 |