Ajax не обновляет форму после отправки, но публикует данные
это код, который я сделал для системы голосования. это тест за пределами моего основного сайта. Я новичок в ajax и jquery и не могу понять, почему я не получаю повторную отправку формы после отправки формы. он по-прежнему публикует данные, и если я обновлю страницу, он покажет новые результаты. из того, что я обнаружил, это связано с частью ajaz, но я новичок в ajax и jquery
enter code here
<!doctype html>
<html>
<head>
<title>Live Poll System in PHP Mysql using Ajax</title>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "container">
<br />
<br />
<br />
<h2 align = "center">Live Poll System in PHP Mysql using Ajax</h2><br />
<div class = "row">
<div class = "col-md-6">
<form method = "POST" id = "poll_form">
<h3>Which is Best PHP Framework in 2018?</h3>
<br />
<div class = "radio">
<label><h4><input type = "radio" name = "poll_option" class = "poll_option" value = "Laravel" /> Laravel</h4></label>
</div>
<div class = "radio">
<label><h4><input type = "radio" name = "poll_option" class = "poll_option" value = "CodeIgniter" /> CodeIgniter</h4></label>
</div>
<div class = "radio">
<label><h4><input type = "radio" name = "poll_option" class = "poll_option" value = "CakePHP" /> CakePHP</h4></label>
</div>
<div class = "radio">
<label><h4><input type = "radio" name = "poll_option" class = "poll_option" value = "Symfony" /> Symfony</h4></label>
</div>
<div class = "radio">
<label><h4><input type = "radio" name = "poll_option" class = "poll_option" value = "Phalcon" /> Phalcon</h4></label>
</div>
<br />
<input type = "submit" name = "poll_button" id = "poll_button" class = "btn btn-primary" />
</form>
<br />
</div>
<div class = "col-md-6">
<br />
<br />
<br />
<h4>Live Poll Result</h4><br />
<div id = "poll_result">
</div>
</div>
</div>
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
fetch_poll_data();
function fetch_poll_data()
{
$.ajax({
url:"fetch_poll_data.php",
method:"POST",
success:function(data)
{
$('#poll_result').html(data);
}
})
};
});
$(document).ready(function(){
$('#poll_form').on('submit', function(event){
event.preventDefault();
var poll_option = '';
$('.poll_option').each(function(){
if ($(this).prop("checked"))
{
poll_option = $(this).val();
}
});
if (poll_option != '')
{
$('#poll_button').attr("disabled", "disabled");
var form_data = $(this).serialize();
$.ajax({
url:"poll.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#poll_form')[0].reset();
$('#poll_button').attr('disabled', false);
fetch_poll_data();
alert("Poll Submitted Successfully");
}
});
}
else
{
alert("Please Select Option");
}
});
});
</script>
это poll.php
<?php
include("database_connection.php");
if (isset($_POST["poll_option"]))
{
$query = "
INSERT INTO tbl_poll
(php_framework) VALUES (:php_framework)";
$data = array(
':php_framework' => $_POST["poll_option"]
);
$statement = $connect->prepare($query);
$statement->execute($data);
}
?>
это то, что мне нужно для получения данных.
<?php
//fetch_poll_data.php
$connect = new PDO("mysql:host=localhost;dbname=commentsection","root","");
$php_framework = array("Laravel", "CodeIgniter", "CakePHP", "Phalcon", "Symfony");
$total_poll_row = get_total_rows($connect);
$output = '';
if ($total_poll_row > 0)
{
foreach($php_framework as $row)
{
$query = "
SELECT * FROM tbl_poll WHERE php_framework = '".$row."'
";
$statement = $connect->prepare($query);
$statement->execute();
$total_row = $statement->rowCount();
$percentage_vote = round(($total_row/$total_poll_row)*100);
$progress_bar_class = '';
if ($percentage_vote >= 40)
{
$progress_bar_class = 'progress-bar-success';
}
else if ($percentage_vote >= 25 && $percentage_vote < 40)
{
$progress_bar_class = 'progress-bar-info';
}
else if ($percentage_vote >= 10 && $percentage_vote < 25)
{
$progress_bar_class = 'progress-bar-warning';
}
else
{
$progress_bar_class = 'progress-bar-danger';
}
$output .= '
<div class = "row">
<div class = "col-sm-2" align = "right">
<label>'.$row.'</label>
</div>
<div class = "col-sm-10">
<div class = "progress">
<div class = "progress-bar '.$progress_bar_class.'" role = "progressbar" aria-valuenow = "'.$percentage_vote.'" aria-valuemin = "0" aria-valuemax = "100" style = "width:'.$percentage_vote.'%">
'.$percentage_vote.' % programmer like <b>'.$row.'</b> PHP Framework
</div>
</div>
</div>
</div>
';
}
}
echo $output;
function get_total_rows($connect)
{
$query = "SELECT * FROM tbl_poll";
$statement = $connect->prepare($query);
$statement->execute();
return $statement->rowCount();
}
?>
и, наконец, это то, что у меня есть для подключения к базе данных.
<?PHP
$connect = new PDO("mysql:host=localhost;dbname=commentsection","root","");
?>
Ответы 2
Если я правильно понимаю, вы хотите, чтобы страница выполняла повторную отправку при отправке формы? В этом случае вам необходимо удалить:
event.preventDefault();
от:
$('#poll_form').on('submit', function(event){}.
event.preventDefault(); отменяет действие по умолчанию кнопки отправки, поэтому повторная отправка не происходит.
Ответ - TL; DR - fetch_poll_data объявлен в вашей первой функции готовности документа и не может использоваться во второй.
(индекс): 115 Uncaught ReferenceError: fetch_poll_data не определен
Вы объявляете свою функцию fetch_poll_data () в своем первом $(document).ready(function () { ... });, а затем пытаетесь повторно использовать ее во втором $(document).ready(function () { ... });.
С JQuery вам нужна только функция 1 Document ready.
Исправлено с использованием вашего кода:
<script>
function fetch_poll_data() {
$.ajax({
url: "fetch_poll_data.php",
method: "POST",
success: function (data) {
$('#poll_result').html(data);
}
})
};
$(document).ready(function () {
fetch_poll_data();
$('#poll_form').on('submit', function (event) {
event.preventDefault();
var poll_option = '';
$('.poll_option').each(function () {
if ($(this).prop("checked")) {
poll_option = $(this).val();
}
});
if (poll_option != '') {
$('#poll_button').attr("disabled", "disabled");
var form_data = $(this).serialize();
$.ajax({
url: "poll.php",
method: "POST",
data: form_data,
success: function (data) {
$('#poll_form')[0].reset();
$('#poll_button').attr('disabled', false);
fetch_poll_data();
alert("Poll Submitted Successfully");
}
});
} else {
alert("Please Select Option");
}
});
});
</script>
Рекомендации по передовой практике
Я настоятельно рекомендую изменить способ использования JQuery и Ajax. Я также начинал как разработчик PHP, и отправлять HTML в браузер было намного проще, чем данные только через javascript. Но поскольку браузеры стали намного быстрее и поток данных требуется все чаще, я бы рекомендовал возвращать данные только в виде JSON и позволять клиенту отображать HTML, он также намного меньше и быстрее на сетевой стороне.
SQL - правильно ли вы храните данные?
В настоящее время я считаю, что вы добавляете новую строку для каждого фреймворка в таблицу с именем tbl_poll. Это могло стать безумно большим. Представьте, что у вас есть 1000 голосов в день на фреймворк, то есть 5000 x 24 x 30 = 3,6 миллиона записей в месяц.
Лучше сохраните свой опрос как промежуточные, а затем добавьте 1 за счет. Вы используете PDO, который затем может выполнять SQL в соответствии с UPDATE Polls SET Votes = Vote + 1 WHERE Framework = "Example Framework"
Обновление индикаторов выполнения при успешном возврате данных:
Когда вы отправляете только номера. Затем вы можете обновить индикаторы выполнения Bootstrap, используя следующий Javascript / JQuery. Он обновит значения и анимацию индикатора выполнения начальной загрузки:
let dataFromPhp = [
{
name: "exampleFramework1",
votes: '5'
},
{
name: "exampleFramework2",
votes: '45'
},
{
name: "exampleFramework3",
votes: '21'
}
]
$.ajax({
url: "fetch_poll_data.php",
method: "GET",
dataType: 'json',
contentType: 'application/json',
success: function (dataFromPhp) {
$.each(dataFromPhp, function (eachObject) {
$('#progress-bar-id-' + eachObject.name).css('width', eachObject.votes + '%').attr('aria-valuenow', eachObject.votes);
});
}
});
@ R3AP3R TV Я не мог понять, что вы имели в виду. Я вижу, что в другом ответе упоминается весь event.preventDefault (), который вы запускали в своей форме. Я предположил, что это тоже то, что вы хотели, но решил дать такой ответ, поскольку он решает проблему в опубликованном вами коде. Если вы хотите, чтобы страница обновлялась, вам не нужен JQuery / Ajax. Вы можете сделать эту страницу полностью на PHP. Отправка данных на PHP-сервер с помощью JQuery позволяет избежать перезагрузки страницы.
Я использовал только php для раздела комментариев на той же странице, для которой я использовал этот код, но просто пытался использовать ajax / jquery для системы голосования, поскольку мерцание при отправке раздражало. также по какой-то причине я никогда не получаю оповещения об успехе
@ R3AP3RTV, что "мерцание" - это перезагрузка страницы. Если у пользователя медленное подключение к Интернету и сайт не кэширует должным образом, это мерцание может быть совершенно новой перезагрузкой страницы. JQuery великолепен, но если вы хотите изучить новый способ создания динамических интерфейсов, таких как одностраничные приложения. Я бы порекомендовал использовать что-то вроде React, Vue, Angular. Поверьте, как человек, потративший 3 года на PHP / JQuery, я предпочел бы выучить что-то более модульное, прогрессивное и легко масштабируемое. Это сэкономит вам много времени и сил в будущем.
Спасибо за совет! Я обязательно изучу то, что вы упомянули. Единственная причина, по которой я сосредоточен на этом, - это то, что это часть моего курса. Я очень ценю помощь и советы. впервые использую StackOverflow, и у него такое потрясающее сообщество
OMG, спасибо вам огромное !!!!! Я потратил несколько дней на поиск в Google и не смог заставить его работать !!!!! Ты самый лучший!!!!!!