Ajax POST с запросом базы данных mysqli - PullRequest
0 голосов
/ 13 апреля 2020

Я пытаюсь получить Ajax для POST другого файла. PHP в том же каталоге, что и основной индекс. Идея заключается в том, что мне нужен онлайн-дневник, в который люди могут писать и мгновенно обновлять его в базе данных.

В настоящее время мой ajax выглядит следующим образом

    $('#diary').on('input propertychange', function() {
    $.ajax({
        type: "POST",
        url: "updatedatabase.php",
        data: {content: $('#diary').val()},
        success: function(  msg  ) {
             alert('Data Saved: ' + msg);
         },
        dataType: "text"
    });
});

My PHP выглядит так в обновленной базе данных. php страница

<?php

session_start();

if ($_POST['content']) {

$link = mysqli_connect("location", "username", "password", "databasename");

if (mysqli_connect_error()) {
    echo "Could not connect to database";
    die;
}

$query = "UPDATE `users` SET `Diary` = '".mysqli_real_escape_string($link, $_POST['content'])."' WHERE email = '".mysqli_real_escape_string($link, $_SESSION['email'])."' LIMIT 1";

if (mysqli_query($link, $query)) {
    echo "Success";
} else {
    echo mysqli_error($link);
    echo "Failure";
}

}

?>

Полный HTML + PHP в начале главной страницы:

<?php

session_start();

$link = mysqli_connect(databaseinfo);

if (mysqli_connect_error()) {
    echo "Could not connect to database";
    die();
}

if (empty($_COOKIE['userId']) && (empty($_SESSION['email']))) {
    header('Location: index.php');
}


$query = "SELECT email FROM users WHERE email = '".mysqli_real_escape_string($link, $_COOKIE['userId'])."' ";

if (!mysqli_query($link, $query)) {
    header('Location: login.php');
    die();
}

if(isset($_POST['logout'])) {
    unset($_SESSION['email']);
    setcookie('userId', '', time() - 60 * 60);
    header('Location: login.php');
}



?>

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style type="text/css">

    body {
        background-image: url("images/landscape.jpg");

    }

    h1 {
        text-align: center;
        margin: 15px auto 30px auto;
    }

    #diary {
        min-height: 40vw;
    }

    </style>

  </head>
  <body>

    <div class="container">
        <div class="container">
        <h1>Secret Diary</h1>   

        <form method="POST">

            <div class="form-group">
            <button type="submit" name="logout" id="logout" class="btn btn-info">Logout</button>   
            </div>

        </form>
        </div>

        <div class="form-group">
            <div class="form-group">
              <textarea class="form-control" name="diary" id="diary" rows="3" placeholder="shhh"></textarea>
            </div>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script type="text/javascript"> 

        $('#diary').on('input propertychange', function() {
        $.ajax({
            type: "POST",
            url: "updatedatabase.php",
            data: {content: $('#diary').val()},
            success: function(  msg  ) {
                 alert('Data Saved: ' + msg);
             },
            dataType: "text"
        });
    });

    </script>

  </body>
</html>

Я попытался изменить с .on.bind, я пробовал разные варианты кода ajax и обновлял код базы данных, я пытался осмотреть StackOverflow.

ps Я понимаю, что в mysqli есть пара ошибок безопасности инъекции запроса. Это в основном для моей практики и учебы, но я изо всех сил пытаюсь понять это.

Большое спасибо заранее.

Ответы [ 2 ]

2 голосов
/ 13 апреля 2020

Используйте .on('change') для привязки к входному событию.

Кроме того, не используйте уменьшенную уменьшенную библиотеку jquery, если вы собираетесь использовать ajax, она не включена. См. jQuery 3 slim ajax basi c пример

РЕДАКТИРОВАТЬ: я получил скрипт работает с этим куском html / js:

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script type="text/javascript">

  $('#diary').on('change', function() {
    $.ajax({
      type: "POST",
      url: "updatedatabase.php",
      data: {content: $('#diary').val()},
      success: function(  msg  ) {
        alert('Data Saved: ' + msg);
      },
      dataType: "text"
    });
  });

</script>

enter image description here

1 голос
/ 13 апреля 2020

Вы должны использовать изменить в jQuery следующим образом:

 $('#diary').on('change', function() {
     code...
 });

или

 $(document).on('change', '#diary', function() {
     code...
 });

или если #diary не создается динамически ( во время выполнения) вы можете сделать:

 $('#diary').change(function() {
     code...
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...