При нажатии кнопки подтверждения функция нажатия кнопки записывает первые две записи console.log. Однако страница перезагружается при выполнении функции почтового вызова; что приводит к ошибке неопределенного индекса k, и функция post никогда не выполняется.
Если я удаляю вызов POST в функции по щелчку, страница не перезагружается.
Может ли кто-нибудь помочь мне понять, почему мой код перезагружает страницу, а не завершает почтовый вызов?
Я использую MAMP и PHP 7.
<?php
$IDN1 = 1;
$IDN2 = 2;
?>
<!DOCTYPE html>
<HTML>
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Test</TITLE>
<STYLE TYPE="TEXT/CSS">
.clear { clear: both; }
html {
background: #e9e9e9;
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1em;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0 auto;
padding: 0;
max-width: 500px;
}
#header_wrapper {
font-size:1.65em;
max-width:500px;
min-width:300px;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
color:black;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
#groups_bg {
max-width:490px;
text-align:left;
padding-top:10px;
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
background-color:#ffffff;
}
#btn_area {
padding-top:15px;
padding-bottom:0px;
}
.ui-widget-header {
border: 0px !important;
}
.ui-button {
width:110px !important;
height:30px !important;
font-size: 16px;
color:#4c4c4c;
}
a:link {
text-decoration: none;
color: #15c;
}
a:visited {
text-decoration: none;
color: #15c;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</STYLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<SCRIPT>
function doit(p1, p2) {
console.log('function start');
$.post('./test7p.php', {id1:p1, id2:p2}, function() {
console.log('function post1');
}, 'json');
console.log('return from post2');
return false;
}
$( document ).ready(function() {
$('#header_wrapper').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
// process the confirm
$('#confirm1').on('click', function() {
console.log('got here');
// get the member and group ids into vars
var IDN1 = "<?php echo $IDN1 ?>";
var IDN2 = "<?php echo $IDN2 ?>";
console.log(IDN1);
console.log(IDN2);
console.log('call function');
a = doit(IDN1, IDN2);
console.log('return from function');
});
});
</SCRIPT>
<BODY>
<div id="header_wrapper">
Test
</div>
<div id="groups_bg">
<div id="btn_area">
<div style="text-align:center;">
<input type="button" id="confirm1" name="confirm1" class='ui-button ui-widget ui-state-default ui-corner-all' value="Confirm">
</div>
</div>
</div>
</BODY>
</HTML>
Вот код PHP, содержащий функцию post:
<?php
if (isset($_POST['id1'])) {
$ret_array['id1'] = $_POST['id1'];
}
if (isset($_POST['id2'])) {
$ret_array['id2'] = $_POST['id2'];
}
$ret_array['status'] = TRUE;
exit(json_encode($ret_array));
Вот вывод из журнала консоли.
0
28 Окт 2019 в 20:40
1 ответ
Я думаю, если вы просто добавите
return false;
На ваш обратный вызов он больше не будет перенаправляться.
0
28 Окт 2019 в 20:43
Не уверен, что я полностью следую тому, что вы советуете, я помещаю return false. Вы инструктируете поместить return false в конец функции по клику? Если да, то это не решило проблему. Функция post по-прежнему не вызывается.
–
28 Окт 2019 в 20:49
Да, я несколько раз сталкивался с этой проблемой в прошлом, которая была исправлена путем возврата false в обратном вызове отправки или preventDefault(), как написано в комментариях.
–
30 Окт 2019 в 11:00
event.preventDefault();в свой обработчик onclick... Также см. заголовок stackoverflow.com/questions/9824808/…, хотя вы указалиtype="button"и не указали форму, поэтому вам должно быть хорошо. Кроме того, единственное, о чем я сомневаюсь, это то, что jqueryUI может что-то делать под капотом.