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","");
?>

如果我理解正确，您希望页面在提交表单时执行重新提交吗？如果是这种情况，您需要删除：

event.preventDefault();发件人：CCD_ 2。

event.preventDefault();取消了提交按钮的默认操作，这就是为什么不会发生重新提交的原因。

Answer-TLDR-fetch_poll_data在第一个文档就绪函数中声明，不能在第二个函数中使用。

(索引(：115未捕获引用错误：未定义fetch_poll_data

您在第一个$(document).ready(function () { ... });中声明fetch_poll_data((函数，然后尝试在第二个$(document).ready(function () { ... });中重用它。

使用JQuery，您只需要1文档就绪功能。

使用您的代码修复：

<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=每月360万条记录

相反，将您的投票存储为整数，然后每计数加1。您使用的PDO可以按照UPDATE Polls SET Votes = Vote + 1 WHERE Framework = "Example Framework"的方式执行SQL

成功返回数据时更新进度条：

一旦你只发送号码。然后，您可以使用以下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);
});
}
});

相关内容

最新更新

热门标签：