Как вызвать функцию PHP без перезагрузки?

В моей тестовой работе я хочу отправить данные в БД, нажав кнопку «Сохранить», и остаться на той же странице. Но эта кнопка после отправки данных в БД открывает /file.php и показывает «Успех». Пытался решить задачу найденным JS, но не получается.

$('#sub').click( function() {
    $.post( $('myForm').attr('action'), $('#myForm :input').serializeArray(), function(info){ $('result').html(info);} );
    clearInput();
});

$('myForm').submit(function() {
    return false;
});

function clearInput() {
    $('#myForm :input').each( function() {
        $(this).val('');
    });
}
<html>
<head>
    <title>
        OneTwoThree
    </title>
</head>
<body>


<form id='myForm' action = "db.php" method = "post">
    Name: <input type = "text" name = "name"><br>
    Age: <input type = "text" name = "age"><br>
    <button id = "sub">Send</button>
</form>

<span id = "result"></span>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "script/myjs.js" type = "text/javascript"></script>
</body>
</html>

Вызываемый файл PHP:

<?php
    $conn = mysql_connect('localhost','root','');
    $db = mysql_select_db('mytestbd');

    $name = $_POST['name'];
    $age = $_POST['age'];

    $q = "INSERT INTO `post`(`number`, `sometext`) VALUES ('$age','$name')";

    if (mysql_query($q))
        echo "Success";
    else
        echo "Fail";
    ?>

что "не работает"? Есть ошибки в вашей консоли? Также вы пропустили хеш: $('result'), так что этот бит не будет делать ничего того же с вашей myForm - вот почему вы фактически отправляете форму, а не остаетесь на той же странице.

Pete 10.07.2018 15:00

попробуйте это: e.preventDefault ();

Sanjay Kumar 10.07.2018 15:03

Спасибо, Санджай, я попробую сейчас

Kamil Timraleev 10.07.2018 15:05

На самом деле вам нужно добавить e в $('#sub').click( function(e) { (сразу после 'function') ... ЗАТЕМ вы можете сделать e.preventDefault();

IncredibleHat 10.07.2018 15:10

Пит, не могли бы вы ввести полную строку кода в правильной форме? Сам не могу найти ошибку. Это мой первый день в JS.

Kamil Timraleev 10.07.2018 15:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
395
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте этот блок js, который включает некоторые изменения и корректировки (указанные ниже):

$(document).ready(function() {               // ready wrapper (was missing in your code)

    $('#sub').click( function(e) {           // added 'e'
        e.preventDefault();                  // added to stop buttons default behavior
        $.post( $('#myForm').attr('action'), // added '#' to id locator
                $('#myForm').serialize(),    // reduced to just serialize the form data
                function(info){
                    $('#result').html(info); // added '#' to id locator
                    clearInput();            // moved clear form into success callback
                }
              );
    });

    $('#myForm').submit(function() {         // added '#' for id locator
        return false;                        // this submit handler is most likely
    });                                      // not needed, but doesnt hurt

    function clearInput() {
        $('#myForm :input').each( function() {
            $(this).val('');
        });
    }

});

PS Как только вы начнете процесс отправки, вы захотите переключить использование функций mysql_* на mysqli или PDO (поскольку mysql_ обесценивается в php 5.5x и удаляется в php7 +).

Затем после переключения загляните в Подготовленные заявления, чтобы защититься от атак sql-инъекций.

Большое спасибо, IncredibleHat

Kamil Timraleev 10.07.2018 15:31

Просто используйте инструкцию include.

if (mysql_query($q))
    echo "Success";
    include('yourFileWithTheForm.php');
else
    echo "Fail";
?>

Другие вопросы по теме