По событию щелчка, вызывающего перезагрузку страницы перед выполнением функции POST - PullRequest
0 голосов
/ 28 октября 2019

При нажатии кнопки подтверждения функция щелчка кнопки записывает первые две записи 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));

Вот вывод из журнала консоли.

enter image description here

1 Ответ

0 голосов
/ 28 октября 2019

Я думаю, что если вы просто добавите

return false;

к вашему обратному вызову, он больше не будет перенаправлять.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...