Как организовать ajax-запрос без перезагрузки страницы?!

@napxo3 · Регистрация: 03.05.2016

Студворк — интернет-сервис помощи студентам

Добрый день!! Имеется модальное окно для редактирование, изменения должны применяться с помощью ajax без перезагрузки страницы. Сделал следующим образом, но страница как и прежде перезагружается!!!

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8">
<title>Статистика оценок БГУ</title>
</head>
<body>
<?php
session_start();
include 'zapis.php';

if(isset($_SESSION['user']))
{
echo '<a href="index.php"><img class="slide_home_login" src="Images/home.png"></a>
<a href="logout.php"><img class="slide_out" src="Images/in.png"></a>
<p class="slide_home" style="width:auto;">Вы вошли как: '.$_SESSION['user']['login'];
} else {
echo '<a href="index.php"><img class="slide_home" src="Images/home.png"></a>
<a href="login.php"><img class="slide_in" src="Images/in.png"></a>
<a href="#" id="go"><img class="slide_reg" src="Images/reg.png"></a>';
}
?>
<div class="MainBlock">
<header class="Head">

<a href="http://www.isea.ru/"><img class="HeadBunner" src="Images/bgu.jpg" alt="Дворик" title="Картинка" > </a>

</header>
<nav class="MainMenu">
<a href="fack.php" class="MainMenu_Item" style="background:#1c94bd;">Факультеты</a>
<a href="group.php" class="MainMenu_Item">Группы</a>
<a href="teacher.php" class="MainMenu_Item">Преподаватели</a>
<a href="statistika.php" class="MainMenu_Item">Статистика</a>
</nav>
<article class="Article">
<h1 class="HeadText">Статистика оценок БГУ</h1>
<div class="Article_Form">
<h1 class="Article_H1">
<table id="myTable" class="table-style ">
<caption>Факультеты</caption>
<thead>
<tr>
<?php

include_once("bd.php");
$query = ( "SELECT * FROM `fakult` ORDER BY id DESC");
$sql = mysql_query($query) or die(mysql_error());
$count = mysql_num_rows($sql);
$rowstart = ($_GET['page'])*5;
$rowend = ($_GET['page']+1)*5;
$ob = ($_GET['ob']);

$ob="id";

echo "<th><a href='fack.php?page=$_GET[page]&ob=id'> ID</a></th>
<th><a href='fack.php?page=$_GET[page]&ob=name'>Название</a></th>

</tr>
</thead>";
if ($count > 5){
$query = ( "SELECT * FROM `fakult` ORDER BY $ob LIMIT $rowstart, 5");
$sql = mysql_query($query) or die(mysql_error());
for($i=$rowstart;$i<=$rowend;$i++)
{
$array = mysql_fetch_array($sql);
if ($array['id']!="")
echo '<tr><td>'.$array['id'].'</td><td>'.$array['name'].'</td></tr>';
}
echo '</table>';
} else {
for($i=1;$i<=$count;$i++)
{
$array = mysql_fetch_array($sql);
echo '<tr><td>'.$array['id'].'</td><td>'.$array['name'].'</td></tr>';
}
echo '</table>';
}
$page = 0;
$countrows = 0;
if ($count > 5){
if ($_GET['page']=="0"){
echo"1 ";
} else {
echo '<a style="font-size: 2em;" href="fack.php?page='.$page.'&ob='.$ob.' ">1 </a>';
}
}
for ($i=1; $i<=$count; $i++){
$countrows++;
if ($countrows > 5){
$page++;
$echopage = $page+1;
$countrows = 0;
$pageget = $_GET['page'];
if ($page==$pageget){
echo $echopage." ";
} else {
echo '<a style="font-size: 2em;" href="fack.php?page='.$page.'&ob='.$ob.' ">'.$echopage.' </a>';
}
}
}
if ($_SESSION['user']['admin'] == 1){
echo '<div class="div-buttton">
<a href="add_fack.php?type=0">
<input class="form_button_table delete_button" id="submit" value="Добавление" type="button">
</a>
<a href="add_fack.php?type=1">
<input class="form_button_table delete_button" id="submit" value="Удаление" type="button">
</a>
<a href="add_fack.php?type=2" id="editfack">
<input class="form_button_table1 delete_button" id="submit" value="Редактирование" type="button">
</a>
</div> ';
}
?>
</h1>
</div>
</article>
<footer class="loginbar">

©1930-2016.All rights reserved
</footer>
</div>
<div id="modal_form">
<span id="modal_close">X</span> 

<form class="login" action="registr.php" method="post" id="login">

<table class="table_center">
<tr>
<td>
<label class="from_label" for="name">ФИО:</label>
</td>
<td>
<input class="form_input" placeholder="Логин" name="login" id="name" autofocus="" required="" type="text">
</td>
</tr>
<tr>
<td>
<label class="from_label" for="fack">Факультет:</label>
</td>
<td>
<input class="form_input" id="fack" name="fack" placeholder="Факультет" type="text">
</td>
</tr>
<tr>
<td>
<label class="from_label" for="kafs">Кафедра:</label>
</td>
<td>
<input class="form_input" id="kafs" name="kafs" placeholder="Кафедра" type="text"> </td>
</tr>
<tr>
<td>
<label class="from_label" for="pass">Пароль:</label>
</td>
<td>
<input class="form_input" id="pass" name="pass" placeholder="Пароль" required="" type="password">
</td>
</tr>
<tr>
<td>
<label class="from_label" for="phone">Телефон:</label>
</td>
<td>
<input class="form_input" id="phone" name="phone" placeholder="Телефон" type="tel">
</td>
</tr>
</table>
<div class="ocentrovka">
<label class="from_label" for="state">Пол:Мужской</label>
<input type="radio" name="state" value="1" >
<label class="from_label" for="state">Женский</label>
<input type="radio" name="state" value="2">
<input class="form_button_registr design_button" id="submit" value="Зарегестироваться" type="submit">
</form>
</div>
</article>

</div>

<div id="overlay"></div>
</body>

<link href="css/reset.css" rel="stylesheet" type="text/css" >
<link href="css/style.css" rel="stylesheet">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="myscripts.js"></script>
<script>
</script>
<script>
$(document).ready(function() {
$('a#go').click( function(event){ // лoвим клик пo ссылки с id="go"
event.preventDefault(); // выключaем стaндaртную рoль элементa
$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
function(){ // пoсле выпoлнения предъидущей aнимaции
$('#modal_form')
.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
});
});
/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
$('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
function(){ // пoсле aнимaции
$(this).css('display', 'none'); // делaем ему display: none;
$('#overlay').fadeOut(400); // скрывaем пoдлoжку
}
);
});
// вся мaгия пoсле зaгрузки стрaницы
$('#editfack').click( function(event){ // лoвим клик пo ссылки с id="go"

event.preventDefault();
$.ajax ({
async:true,
url: $(this).attr("href"),
type: "GET",
success: function(data){
$("#ajaxform").empty();
$("#ajaxform").append($("#ajaxform", data).html());
$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
function(){ // пoсле выпoлнения предъидущей aнимaции
$('#modal_form1')
.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
});

}

});// выключaем стaндaртную рoль элементa

});

/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
$('#modal_close1, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
$('#modal_form1')
.animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
function(){ // пoсле aнимaции
$(this).css('display', 'none'); // делaем ему display: none;
$('#overlay').fadeOut(400); // скрывaем пoдлoжку
}
);
});
});
</script>
<div id="modal_form1">
<span id="modal_close1">X</span> 
<form id="ajaxform" action="method_fack.php" method="post"></form>
</div>

</html>

@sad67man · 09.05.2016, 22:34

123

@napxo3 · 10.05.2016, 11:56 **[ТС]**

?!??!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@napxo3 0 / 0 / 0 Регистрация: 03.05.2016 Сообщений: 4

	Как организовать ajax-запрос без перезагрузки страницы?! 08.05.2016, 05:43. Показов 1169. Ответов 2 Метки нет (Все метки) Добрый день!! Имеется модальное окно для редактирование, изменения должны применяться с помощью ajax без перезагрузки страницы. Сделал следующим образом, но страница как и прежде перезагружается!!! <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <meta charset="UTF-8"> <title>Статистика оценок БГУ</title> </head> <body> <?php session_start(); include 'zapis.php'; if(isset($_SESSION['user'])) { echo '<a href="index.php"><img class="slide_home_login" src="Images/home.png"></a> <a href="logout.php"><img class="slide_out" src="Images/in.png"></a> <p class="slide_home" style="width:auto;">Вы вошли как: '.$_SESSION['user']['login']; } else { echo '<a href="index.php"><img class="slide_home" src="Images/home.png"></a> <a href="login.php"><img class="slide_in" src="Images/in.png"></a> <a href="#" id="go"><img class="slide_reg" src="Images/reg.png"></a>'; } ?> <div class="MainBlock"> <header class="Head"> <a href="http://www.isea.ru/"><img class="HeadBunner" src="Images/bgu.jpg" alt="Дворик" title="Картинка" > </a> </header> <nav class="MainMenu"> <a href="fack.php" class="MainMenu_Item" style="background:#1c94bd;">Факультеты</a> <a href="group.php" class="MainMenu_Item">Группы</a> <a href="teacher.php" class="MainMenu_Item">Преподаватели</a> <a href="statistika.php" class="MainMenu_Item">Статистика</a> </nav> <article class="Article"> <h1 class="HeadText">Статистика оценок БГУ</h1> <div class="Article_Form"> <h1 class="Article_H1"> <table id="myTable" class="table-style "> <caption>Факультеты</caption> <thead> <tr> <?php include_once("bd.php"); $query = ( "SELECT * FROM `fakult` ORDER BY id DESC"); $sql = mysql_query($query) or die(mysql_error()); $count = mysql_num_rows($sql); $rowstart = ($_GET['page'])5; $rowend = ($_GET['page']+1)5; $ob = ($_GET['ob']); $ob="id"; echo "<th><a href='fack.php?page=$_GET[page]&ob=id'> ID</a></th> <th><a href='fack.php?page=$_GET[page]&ob=name'>Название</a></th> </tr> </thead>"; if ($count > 5){ $query = ( "SELECT * FROM `fakult` ORDER BY $ob LIMIT $rowstart, 5"); $sql = mysql_query($query) or die(mysql_error()); for($i=$rowstart;$i<=$rowend;$i++) { $array = mysql_fetch_array($sql); if ($array['id']!="") echo '<tr><td>'.$array['id'].'</td><td>'.$array['name'].'</td></tr>'; } echo '</table>'; } else { for($i=1;$i<=$count;$i++) { $array = mysql_fetch_array($sql); echo '<tr><td>'.$array['id'].'</td><td>'.$array['name'].'</td></tr>'; } echo '</table>'; } $page = 0; $countrows = 0; if ($count > 5){ if ($_GET['page']=="0"){ echo"1 "; } else { echo '<a style="font-size: 2em;" href="fack.php?page='.$page.'&ob='.$ob.' ">1 </a>'; } } for ($i=1; $i<=$count; $i++){ $countrows++; if ($countrows > 5){ $page++; $echopage = $page+1; $countrows = 0; $pageget = $_GET['page']; if ($page==$pageget){ echo $echopage." "; } else { echo '<a style="font-size: 2em;" href="fack.php?page='.$page.'&ob='.$ob.' ">'.$echopage.' </a>'; } } } if ($_SESSION['user']['admin'] == 1){ echo '<div class="div-buttton"> <a href="add_fack.php?type=0"> <input class="form_button_table delete_button" id="submit" value="Добавление" type="button"> </a> <a href="add_fack.php?type=1"> <input class="form_button_table delete_button" id="submit" value="Удаление" type="button"> </a> <a href="add_fack.php?type=2" id="editfack"> <input class="form_button_table1 delete_button" id="submit" value="Редактирование" type="button"> </a> </div> '; } ?> </h1> </div> </article> <footer class="loginbar"> ©1930-2016.All rights reserved </footer> </div> <div id="modal_form"><!-- Сaмo oкнo --> <span id="modal_close">X</span> <!-- Кнoпкa зaкрыть --> <!-- Тут любoе сoдержимoе --> <form class="login" action="registr.php" method="post" id="login"> <table class="table_center"> <tr> <td> <label class="from_label" for="name">ФИО:</label> </td> <td> <input class="form_input" placeholder="Логин" name="login" id="name" autofocus="" required="" type="text"> </td> </tr> <tr> <td> <label class="from_label" for="fack">Факультет:</label> </td> <td> <input class="form_input" id="fack" name="fack" placeholder="Факультет" type="text"> </td> </tr> <tr> <td> <label class="from_label" for="kafs">Кафедра:</label> </td> <td> <input class="form_input" id="kafs" name="kafs" placeholder="Кафедра" type="text"> </td> </tr> <tr> <td> <label class="from_label" for="pass">Пароль:</label> </td> <td> <input class="form_input" id="pass" name="pass" placeholder="Пароль" required="" type="password"> </td> </tr> <tr> <td> <label class="from_label" for="phone">Телефон:</label> </td> <td> <input class="form_input" id="phone" name="phone" placeholder="Телефон" type="tel"> </td> </tr> </table> <div class="ocentrovka"> <label class="from_label" for="state">Пол:Мужской</label> <input type="radio" name="state" value="1" > <label class="from_label" for="state">Женский</label> <input type="radio" name="state" value="2"> <input class="form_button_registr design_button" id="submit" value="Зарегестироваться" type="submit"> </form> </div> </article> </div> <div id="overlay"></div><!-- Пoдлoжкa --> </body> <link href="css/reset.css" rel="stylesheet" type="text/css" > <link href="css/style.css" rel="stylesheet"> <link href="css/media-queries.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="myscripts.js"></script> <script> </script> <script> $(document).ready(function() { $('a#go').click( function(event){ // лoвим клик пo ссылки с id="go" event.preventDefault(); // выключaем стaндaртную рoль элементa $('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку function(){ // пoсле выпoлнения предъидущей aнимaции $('#modal_form') .css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none; .animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз }); }); /* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке / $('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке $('#modal_form') .animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх function(){ // пoсле aнимaции $(this).css('display', 'none'); // делaем ему display: none; $('#overlay').fadeOut(400); // скрывaем пoдлoжку } ); }); // вся мaгия пoсле зaгрузки стрaницы $('#editfack').click( function(event){ // лoвим клик пo ссылки с id="go" event.preventDefault(); $.ajax ({ async:true, url: $(this).attr("href"), type: "GET", success: function(data){ $("#ajaxform").empty(); $("#ajaxform").append($("#ajaxform", data).html()); $('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку function(){ // пoсле выпoлнения предъидущей aнимaции $('#modal_form1') .css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none; .animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз }); } });// выключaем стaндaртную рoль элементa }); / Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */ $('#modal_close1, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке $('#modal_form1') .animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх function(){ // пoсле aнимaции $(this).css('display', 'none'); // делaем ему display: none; $('#overlay').fadeOut(400); // скрывaем пoдлoжку } ); }); }); </script> <div id="modal_form1"><!-- Сaмo oкнo --> <span id="modal_close1">X</span> <!-- Кнoпкa зaкрыть --> <form id="ajaxform" action="method_fack.php" method="post"></form> </div> </html> 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	09.05.2016, 22:34
	123 0

@napxo3 0 / 0 / 0 Регистрация: 03.05.2016 Сообщений: 4
	10.05.2016, 11:56 [ТС]
	?!??! 0