반응형
페이지 새로 고침 없이 양식 제출
내가 안고 있는 이 작은 문제를 누군가 도와줄 수 있을지도 몰라페이지를 새로 고치지 않고 이 양식을 제출하려고 합니다.단, 투고는 건너뛰고 바로 Ajax 콜로 이동합니다.prevent Default()를 이해하지 못한 것 같습니다.온라인으로 검색했지만 필요한 것을 찾을 수 없습니다.도움을 주시거나 다른 양식을 제출해 주시면 감사하겠습니다.
아래 HTML:
<!DOCTYPE html>
<html>
<head>
<title>AJAX | Project</title>
<link href="project.css" rel="stylesheet"/>
<script src="jquery.js"></script>
</head>
<body>
<div id="mainCon">
<h1>Contact Book</h1>
<div id="form_input">
<form id="myform" method="post" action="addrecord.php">
<label for="fullname">Name:</label>
<input type="text" name="fullname" id="fullname"/><span id="NameError"> </span>
<br/>
<label for="phonenumber">Phone Number:</label>
<input type="text" id="phonenumber" name="phonenumber"><span id="PhoneError"></span>
<br />
<input id="buttton" type="submit" onClick="addnumber()" value="Add Phone Number"/>
<input type="button" id="show" value="the Results"/>
</form>
</div>
<div id="form_output">
</div>
</div>
<script src="project.js"></script>
<script type="text/javascript">
function addnumber(){
var Fullname = document.getElementById("fullname").value;
var Phonenumber = document.getElementById("phonenumber").value;
if(Fullname == ""){
document.getElementById("NameError").innerHTML = "Please Enter a valided Name";
}
if(Phonenumber == ""){
document.getElementById("PhoneError").innerHTML = "Please Enter a valided Name";
}
}
</script>
</body>
</html>
쿼리
$("document").ready(function () {
$("#buttton").click(function () {
$('#myform').submit(function (e) {
e.preventDefault();
$.ajax({
url: "listrecord.php",
type: "GET",
data: "data",
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
}); // AJAX Get Jquery statment
});
}); // Click effect
}); //Begin of Jquery Statement
제출 이벤트를 잡아서 방지하고, Ajax를 실행하세요.
$(document).ready(function () {
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "GET",
data: $(this).serialize(),
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
<script type="text/javascript">
var frm = $('#myform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
</script>
<form id="myform" action="/your_url" method="post">
...
</form>
<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button" />
</form>
<script>
$(document).ready(function(){
$(function(){
$("#myForm").submit(function(event){
event.preventDefault();
$.ajax({
method: 'POST',
url: 'submit.php',
dataType: "json",
contentType: "application/json",
data : $('#myForm').serialize(),
success: function(data){
alert(data);
},
error: function(xhr, desc, err){
console.log(err);
}
});
});
});
});
</script>
</body>
</html>
<!-- submit.php -->
<?php
$value ="call";
header('Content-Type: application/json');
echo json_encode($value);
?>
문제는 폼이 "POST" 메서드를 사용하여 전송하고 있으며, AJAX에서는 "GET" 메서드를 사용하고 있다는 것입니다.
언급URL : https://stackoverflow.com/questions/23507608/form-submission-without-page-refresh
반응형
'programing' 카테고리의 다른 글
| AngularJS: 서버측 검증과의 통합 (0) | 2023.03.20 |
|---|---|
| 응답으로 버튼을 클릭할 때 새 탭에서 페이지를 여는 방법나도 그 페이지로 데이터를 보내고 싶다. (0) | 2023.03.20 |
| 반응 - useState 초기값이 설정되지 않음 (0) | 2023.03.20 |
| 워드프레스 루프 - 항목 카운트 방법 (0) | 2023.03.20 |
| 현재 사용자에게 활성 구독이 있는지 감지 (0) | 2023.03.20 |