페이지를 새로고침하지 않고 양식 제출
저는 기밀 웹사이트를 가지고 있고, 광고가 나오는 페이지에서 "친구에게 팁 보내기" 폼을 만들고 있습니다.
그래서 누구든지 원하는 사람은 그 광고의 팁을 몇몇 친구들에게 이메일 주소로 보낼 수 있다.
폼은 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>
양식을 제출하면 페이지가 새로고침됩니다.난 그걸 원하지 않아...
새로고침하지 않고 메일을 보낼 수 있는 방법이 있나요?가능하면 아약스나 jquery를 빼고...
나는 내가 생각하는 더 쉬운 방법을 찾았다.페이지에 Iframe을 입력하면 액션의 종료를 리다이렉트하여 표시할 수 있습니다.물론 아무것도 할 수 없어요.이 경우 iframe 표시를 none으로 설정할 수 있습니다.
<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 요청을 제출해야 합니다.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요청 처리 및 이메일 전송에 필요한 페이지입니다.
AJAX를 사용하거나
- iframe을 작성하여 문서에 추가하다
- iframes 이름을 foo로 설정하다
- 폼의 타겟을 「foo」로 설정하다
- 제출하다
- 폼 액션을 통해 javascript를 parent.discript(...)로 렌더링하여 피드백을 제공하다
- 선택적으로 iframe을 제거할 수 있습니다.
가장 빠르고 쉬운 방법은 iframe을 사용하는 것입니다.페이지 하단에 프레임을 넣으세요.
<iframe name="frame"></iframe>
그리고 당신의 모습으로 이렇게 하세요.
<form target="frame">
</form>
css에서 프레임을 보이지 않게 할 수 있습니다.
iframe{
display: none;
}
페이지를 새로고침하지 않고 양식을 제출하면 동일한 페이지에 제출된 데이터의 결과를 얻을 수 있습니다.
Here's some of the code I found on the internet that solves this problem :1) IFRAME
폼이 전송되면 액션이 실행되어 새로고침할 특정 iframe을 대상으로 합니다.
index.displaces를 표시합니다.
<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>
iframe_content.php
<?php
$Submit = isset($_POST['Submit']) ? $_POST['Submit'] : false;
$Name = isset($_POST['Name']) ? $_POST['Name'] : '';
if($Submit){
echo $Name;
}
?>
2) AJAX
Index.php:
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.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>
server_action.php
<?php
$name = isset($_POST['name']) ? $_POST['name'] : '';
$descr = isset($_POST['descr']) ? $_POST['descr'] : '';
echo $name;
echo $descr;
?>
을 받는 jquery-ajax, 비포함.ajax현재 해결책은 없습니다.
자바스크립트 ★★★★★★★★★★를 설정해 주세요.onsubmit="func()"함수가 호출되어도 송신 디폴트 액션이 실행됩니다.이 작업을 수행해도 페이지의 새로 고침 또는 리디렉션을 중지할 수 없습니다.따라서 다음 작업은 기본 작업을 방지하는 것입니다. 하다, 하다, 하다, 하다, , 하다의 첫 줄을 넣으세요.func().
event.preventDefault()
리다이렉트나 리프레시는 없습니다.은 「」, 「」로부터 만으로 끝납니다.func()콜이 끝나면 하고 싶은 거 다 해.
예를 들어:
폼:
<form id="form-id" onsubmit="func()">
<input id="input-id" type="text">
</form>
Javascript:
function func(){
event.preventDefault();
var newValue = $('#input-field-id').val();
$.ajax({
type: 'POST',
url: '...',
data: {...},
datatype: 'JSON',
success: function(data){...},
error: function(){...},
});
}
이것이 바로 jQuery와 AJAX 없이도 작동하는 방식이며, 단순한 iFrame을 사용해도 매우 잘 작동합니다.오페라 10, FF3, IE6에서 작업하는 IT를 좋아합니다.위의 포스터 중 몇 개가 올바른 방향을 알려주었기 때문에, 제가 여기에 글을 올리는 이유는 그것뿐입니다.
<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>
');
}
또 다른 방법은 javascript를 당신의 함수에 직접 링크하는 것입니다.
<form action="javascript:your_function();" method="post">
...
이것으로 당신의 문제가 해결될 것입니다.
합니다.
POST/GETPOST/GET 라고 합니다.
data: 또는 임의의 를 선택할 수 정보.data: "입력 필드 또는 "데이터"를 선택합니다.
서버에서 모든 콜백: " " " " " " "
또는 , 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>
양식의 대상 속성을 숨겨진 iframe으로 설정하여 양식을 포함하는 페이지가 다시 로드되지 않도록 할 수 있습니다.
AJAX에서는 할 수 없는 파일 업로드를 시도했는데, 훌륭하게 동작했습니다.
iFrame을 사용해 본 적이 있습니까?Ajax가 없으며 원래 페이지는 로드되지 않습니다.
송신 폼을 iframe내의 다른 페이지로 표시할 수 있습니다.이 폼이 송신되었을 때, 외부/컨테이너 페이지는 새로고침 되지 않습니다.이 용액은 어떤 종류의 아약스도 사용하지 않을 것이다.
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');
}
} );
}
좋은 해결책을 찾기 위해 여러 번 노력했고, @taufique의 답변으로 이 답변에 도달했습니다.
NB : 잊지 말고 넣어주세요.event.preventDefault();함수의 본문의 선두에 있습니다.
위의 jquery와 비슷한 작업을 했는데, 폼 데이터와 그래픽 첨부 캔버스를 리셋해야 했습니다.그래서 제가 생각해낸 것은 다음과 같습니다.
<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>
이것은 저에게 있어서 매우 효과적입니다.당신의 html 형식의 어플리케이션에서는 이 jquery 코드를 다음과 같이 단순화할 수 있습니다.
<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>
javascript를 사용하지 않으려면 페이지가 다시 로드됩니다.
JavaScript를 JavaScript를 .iframe(접근법).
JavaScript에서 실행할 수 있습니다.jQuery를 사용하면 쉽게 할 수 있습니다.
AJAX와 Posting을 확인해 보시기 바랍니다.
JavaScript도 모르고 PHP를 배우기 시작한 지 얼마 되지 않았기 때문에 이 모든 답변에서 도움이 된 것은 다음과 같습니다.
- inedx.php를 작성하고 다음 내용을 삽입합니다.
<iframe name="email" style=""></iframe>
<form action="email.php" method="post" target="email">
<input type="email" name="email" >
<input type="submit" name="Submit" value="Submit">
</form>
- 이메일을 만듭니다.php 및 이 코드를 삽입하여 데이터를 가져오고 있는지 확인합니다(iframe의 index.display에 표시됩니다).
<?php
if (isset($_POST['Submit'])){
$email = $_POST['email'];
echo $email;
}
?>
- 문제가 없으면 이메일의 코드를 변경합니다.php 대상:
<?php
if (isset($_POST['Submit'])){
$to = $_POST['email'];
$subject = "Test email";
$message = "Test message";
$headers = "From: test@test.com \r\n";
$headers .= "Reply-To: test@test.com \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
mail($to, $subject, $message, $headers);
}
?>
나 같은 다른 모든 신입사원들에게 도움이 되었으면 좋겠다:)
폼이 있는 같은 페이지에 제출하는 경우 액션 없이 폼 태그를 작성할 수 있습니다.이렇게 제출됩니다.
<form method='post'> <!-- you can see there is no action here-->
다음은 php 페이지에 게시하고 html을 되돌리기 위한 jQuery입니다.
$('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
'programing' 카테고리의 다른 글
| mariadb "too many connections" 오류가 발생하여 웹 사이트가 다운되었습니다. (0) | 2022.11.20 |
|---|---|
| MySQL에서 공백이 있는 열 이름을 선택하는 방법 (0) | 2022.11.11 |
| Java 웹 앱에서 .do 확장자를 사용하는 이유는 무엇입니까?그것은 어디서 난 거야? (0) | 2022.11.11 |
| 변수 사용 시 느린 sql 문 (0) | 2022.11.11 |
| 10번 베이스에서 26번 베이스로 글자만 표시되므로 26번 베이스는 aa가 됩니다. (0) | 2022.11.11 |