JavaScript — изменение содержимого страницы с помощью AJAX после отправки всплывающей формы

Question

JavaScript — изменение содержимого страницы с помощью AJAX после отправки всплывающей формы

У меня есть проблема, что для того, чтобы изменить содержимое страницы, я должен получить пользовательский ввод. Я хочу сделать это через всплывающую форму. После нажатия кнопки «отправить» во всплывающем окне я хочу отправить входную форму в php файл, в котором я подключаюсь к базе данных и отправляю полученную информацию через JSON js файл, где я использую $.post() способ добиться всего этого. Проблема в том, что при изменении содержимого страницы без перезагрузки я перенаправляюсь на страницу http://localhost/statistics.php?major=KN&year=2011 но я хочу остаться на странице http://localhost/statistics.php, Вот почему я использую AJAX в первую очередь. major=KN & year=2011 мои параметры POST. Можно ли изменить содержимое страницы после отправки всплывающей формы? Любая помощь будет принята с благодарностью.

Вот код, который, я думаю, может иметь отношение к решению проблемы:

    <html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="ch/Chart.js"></script>
<script src="js/statistics_js.js"></script>
</head>
<body>
<div id="content">
<div id="abc">
<div id="popupContact">
<form id="form1" name="form1">
<img class="close" src="images/3.png" onclick ="div_hide_group_popup()">
<h2>Fill the form</h2>
<hr>
<input name="major" placeholder="Major" type="text">
<input name="year" placeholder="Year" type="number">
<button id="submit1">Submit</button>
</form>
</div>
</div>
<div id="page">
<canvas id="myChart"></canvas>
</div>
<aside>
<h3>Compare</h3>
<ul>
<li id="group"><a href="#">groups</a></li>
</ul>
</aside>
</div>
</body>
</html>

js/statistics_js.js файл:

    function error(){
alert('Error!');
}

$(document).ready(function(){
$('#group').on('click', function(e) {
e.preventDefault();
document.getElementById('abc').style.display = "block";
});
});

$(document).ready(function(){
$("#submit1").click( function() {
$.post( "http://localhost/group_sort.php", $("#form1").serialize(), "JSON").done(function(data) {
//This should use the Chart.js library to draw a chart on the canvas with the data retrieved from the server.
var barChartData = {
labels : data.groups,
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : data.groups_total_points
}
]
}
var ctx = document.getElementById("myChart").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}).error(error);
});
});

function div_hide_group_popup(){
document.getElementById('abc').style.display = "none";
}

мой group_sort.php:

    <?php
require "config.php";
try {
$conn = new PDO("mysql:host=" . DB_SERVER . ";dbname=" . DB_NAME, DB_USERNAME, DB_PASSWORD);
}
catch(PDOException $e) {
die("Database connection could not be established.");
}
$conn->exec("SET NAMES UTF8");
$major = $_POST['major'];
$year = $_POST['year'];
$sql = "SELECT result.group, SUM(result.grade) AS group_total_points
FROM (
SELECT *
FROM students AS s
INNER JOIN points AS p
ON s.fn = p.student_fn
) result
WHERE result.major = '$major' AND result.year = '$year'
GROUP BY result.group
ORDER BY group_total_points DESC";
$query = $conn->query($sql);
if($query->rowCount() > 0) {
$data = array (
"groups" => [],
"groups_total_points" => [],
);
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
$data["groups"][] = $row["group"];
$data["groups_total_points"][] = $row["group_total_points"];
}
echo json_encode($data);
}
else {
echo mysql_error();
}

$conn = null;
?>

0

ajax javascript jquery php popup

Решение

Другие решения

Ваша проблема в том, что ваша кнопка отправки завершает отправку. Я бы порекомендовал изменить ее на обычную кнопку, чтобы предотвратить отправку, хотя они смогут нажать кнопку ввода и отправить форму. Для этого вы должны заблокировать функцию отправки формы.

Более простое решение — заменить форму простым div:

<div class="form">
<img class="close" src="images/3.png" onclick ="div_hide_group_popup()">
<h2>Fill the form</h2>
<hr>
<input class="submit-form" name="major" placeholder="Major" type="text">
<input class="submit-form" name="year" placeholder="Year" type="number">
<button id="submit1">Submit</button>
</div>

Затем с помощью jquery вы можете выбрать элементы формы в обратном вызове document.ready:

 $(document).ready(function(){
var input = $('input.submit-form');
$("#submit1").click( function() {
$.post(
"http://localhost/group_sort.php",
input.serialize(),
"JSON").done(function(data) { //...

0

Источник

Accepted Answer

Ваша кнопка отправки, вероятно, отправляет форму, когда вы нажимаете на нее. Запрет действия по умолчанию при нажатии:

    $("#submit1").click( function(event) {
event.preventDefault();
$.post( "http://localhost/group_sort.php", $("#form1").serialize(), "JSON").done(function(data) {

1