PHP ajax를 사용하여 Modal Box에서 HTML 양식 데이터를 제출하는 방법은 무엇입니까?
린스
PHP와 Ajax를 사용하여 데이터베이스 에 state이름 을 추가 state mysql table하고 싶지만 모달 상자가 정보를 제출하지 않습니다. 단일 버튼 제출에 대한 모든 코드를 모델 상자에 게시했으며 다음과 같습니다.
내 디렉토리 구조는 다음과 같습니다.
test.html
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="./model.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
</script>
</head>
<body>
<button id="add_state">Add State</button>
<div>
<?php
include('server/connection.php');
$sqlSelect="SELECT * FROM tbl_state_info ORDER By StateName ASC";
$result = $conn -> query ($sqlSelect);
$result = $conn -> query ($sqlSelect);
echo "<select name='StateName'>";
echo "<option>select</option>";
while ($row = mysqli_fetch_array($result)) {
echo "<option value=$row[StateName]> $row[StateName] </option>";
}
echo "</select>";
?>
</div>
<div id="add_state_model" class="add_state_model">
<div class="add_state_model_content">
<span class="state_model_close">×</span>
<form id="state_submit_form" method="post" action="">
<label>Enter State:</label>
<input type="text" name="state">
<input type="submit" name="state_submit">
</form>
<div class="message_box" style="margin-left: 60px;"></div>
</div>
</div>
<script src="./model.js"></script>
</body>
</html>
백엔드의 경우 자바 스크립트와 PHP를 사용하고 있습니다.
model.js
var add_state_model = document.getElementById('add_state_model');
var add_state_button = document.getElementById('add_state');
var add_state_span = document.getElementsByClassName('state_model_close')[0];
add_state_button.onclick = function(){
add_state_model.style.display = "block";
}
add_state_span.onclick = function(){
add_state_model.style.display = "none";
}
window.onclick = function(event) {
if (event.target == add_state_model) {
add_state_model.style.display = "none";
}
}
$(document).ready(function(){
var delay = 1000;
$('[name="state_submit"]').click(function(e){
e.preventDefault();
var state = $('#state_submit_form').find('[name="state"]').val();
if(state === ''){
$('.message_box').html(
'<p><span style="color:red;">Please enter state name!</span></p>'
);
$('[name="state"]').focus();
return false;
}
console.log(state);
$.ajax({
type: "POST",
url: "server/addstate.php",
data: {"state":state},
beforeSend: function() {
$('.message_box').html(
'<img src="./tenor.gif" width="40" height="40"/>'
);
},
success: function(data)
{
setTimeout(function() {
$('.message_box').html(data);
}, 1000);
}
});
});
});
또한 서버 페이지가 있습니다. addstate.php
<?php
if ( ($_POST['state']!="") ){
$state = $_POST['state'];
include('connection.php');
/* check connection */
if ($conn->connect_errno) {
printf("Connect failed: %s\n", $conn->connect_error);
exit();
}
//insert query for registration
$insertSql = "INSERT INTO `tbl_state_info`(`StateName`) VALUES ('$state')";
if ($conn->query($insertSql) === TRUE) {
echo "<span style='color:green;'>
<p>State added to dropdown</p>
</span>";
}else{
printf("Error: %s\n", $conn->error);
}
}
?>
및 connection.php파일
<?php
// set the timezone first
if(function_exists('date_default_timezone_set')) {
date_default_timezone_set("Asia/Kolkata");
}
$conn = new mysqli('localhost', 'root', '');
//check connection
if($conn->connect_error){
die("Connection Failed".$conn->connect_error);
}
//connect database
mysqli_select_db($conn, 'crm');
?>
css 파일 model.css은 Model Box 팝업에 사용됩니다.
.add_state_model {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.add_state_model_content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.state_model_close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.state_model_close:hover,
.state_model_close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
아래 오류가 발생합니다.
만누 사라 스왓
내가 틀리지 않았다면 나를 바로 잡으세요
이 URL을 방문하면 문제를 해결하는 데 도움이됩니다. 해결 방법 'CORS 정책에 의해 리디렉션이 차단되었습니다 :'Access-Control-Allow-Origin '헤더가 없습니다'?
또는 내가 시도한 URL 경로를 변경해보십시오.
url: "http://localhost/CRM/server/addstate.php",
to
url: "server/addstate.php"
도움이 필요하면 언제든지 물어보세요
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Ajax .serialize () 데이터를 사용하여 PHP에 양식을 게시하는 방법은 무엇입니까?
- 2
JavaScript를 사용하여 여러 HTML 양식을 하나의 양식으로 PHP 스크립트에 제출하는 방법은 무엇입니까?
- 3
jQuery Ajax를 사용하여 여러 양식 값을 PHP에 전달하는 방법은 무엇입니까?
- 4
csp 헤더를 사용하여 html 양식을 validation.php로 안전하게 제출 / 리디렉션하는 가장 좋은 방법은 무엇입니까?
- 5
Django 1.10을 사용하여 HTML 양식의 데이터를 postgres 데이터베이스에 저장하는 방법은 무엇입니까?
- 6
PHP 양식을 사용하여 여러 테이블에서 데이터를 검색하는 방법은 무엇입니까?
- 7
PHP를 사용하여 양식 데이터를 메시지로 보내는 방법은 무엇입니까?
- 8
양식에서 제출 한 데이터를 구조화 / 제어하는 방법은 무엇입니까?
- 9
PHP 양식을 사용하여 한 번에 여러 이미지를 ulpload하는 방법은 무엇입니까?
- 10
jquery로 양식을 제출하고 JSON에서 데이터를 검색하는 방법은 무엇입니까?
- 11
부분보기 MVC 4를 사용하여 부모 양식에서 데이터를 제출하는 올바른 방법은 무엇입니까?
- 12
PHP 페이지에서 양식 iframe WYSIWYG를 제출하는 방법은 무엇입니까?
- 13
ajax 양식 제출을 사용하여 codeigniter 양식 유효성 검사에서 오류를 인라인으로 표시하는 방법은 무엇입니까?
- 14
JavaScript를 사용하여 HTML 양식에서 Google 스프레드 시트로 데이터를 보내는 방법은 무엇입니까?
- 15
PHP에서 양식과 데이터베이스를 연결하는 방법은 무엇입니까?
- 16
NPAPI를 사용하여 Delphi VCL 양식을 HTML 페이지에 포함하는 방법은 무엇입니까?
- 17
jquery에서 제출 한 PHP 양식 GET 데이터를 다른 자바 스크립트 코드 및 URL로 에코하는 방법은 무엇입니까?
- 18
PHP를 사용하여 양식의 드롭 다운 목록에 MySQL의 데이터를 표시하는 방법은 무엇입니까?
- 19
양식에 데이터를 제출하기 전에 요청을 변경하는 방법은 무엇입니까?
- 20
양식 구성 요소를 사용하여 외부 URL에 제출하는 방법은 무엇입니까?
- 21
Linq를 사용하여 데이터베이스에서 HTML을 추출하는 방법은 무엇입니까?
- 22
PHP를 사용하여 양식에 정의되지 않은 변수를 얻는 방법은 무엇입니까?
- 23
양식에 일부 정보를 제출 한 후 SetState를 사용하여 데이터를 얻는 방법은 무엇입니까?
- 24
HTML 양식을 사용하여 XML 파일에 데이터를 보내고 저장하는 방법은 무엇입니까?
- 25
HTML 양식을 사용하여 XML 파일에 데이터를 보내고 저장하는 방법은 무엇입니까?
- 26
axios가 양식 데이터를 게시 할 수 있도록 제출 리스너에서 양식 데이터를 전달하는 방법은 무엇입니까?
- 27
사용자 입력을 기반으로 PHP 및 AJAX를 사용하여 XML에서 데이터를 추출하는 방법은 무엇입니까?
- 28
PHP를 사용하여 양식 데이터로 SQL 데이터베이스를 업데이트하는 방법은 무엇입니까?
- 29
HTML 양식에서 PHP 스크립트로 변수를 전달하는 방법은 무엇입니까?
몇 마디 만하겠습니다