Displaying a post in AJAX and PHP-CodePudding

So currently I have a system which basically lets you type a post, click the post button, and then it will display the post. Here is the input field and post button code (File Name - yourposts.php):

<form method="post" >
 <textarea id="postContent" name="postContent" rows="8" cols="80"  placeholder="What's going on, <?php echo $firstname ?>?"></textarea>
 <button id="pos" >Post</button>
</form>

Now, when you type your post and click the submit button, your post will be inserted into the database. Here's the code for that (File Name - post.php):

<?php

session_start();

// Making Connection To The Database

$dbHost = "localhost";
$dbUser = "root";
$dbPass = "root";
$database = "feed";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, we could not connect to the database");

// Posting System

if (!empty($_POST['postContent'])) {
  $post = $_POST['postContent'];
  $firstname = $_SESSION['firstname'];
  $lastname = $_SESSION['lastname'];

  $sql = "INSERT INTO posts (firstname, lastname, body, date_posted) VALUES (?, ?, ?, NOW())";
  $stmt = mysqli_stmt_init($connection);
  // nested if statement
  if (!mysqli_stmt_prepare($stmt, $sql)) {
    echo "";
  } else {
    mysqli_stmt_bind_param($stmt, "sss", $firstname, $lastname, $post);
    mysqli_stmt_execute($stmt);
  }
} else {
  echo "";
}

?>

Now, after posting, and the post getting inserted into the database, your post will be displayed. And this is the code for that (File Name - yourposts.php). And also, I did include post.php at the bottom of this file. The code:

<div >
  <?php

  $sql = "SELECT * FROM posts";
  $result = mysqli_query($connection, $sql);
  if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {

  ?>
  <div >
    // all the post content displayed (the post, etc.)
  </div>
  <?php

  }
}

  ?>
</div>

So, after typing the post and posting it by clicking the post button, the post will get displayed. However, for the post to be displayed, you need to make the post, and then refresh the page which will then display the post, but then send two entries of the same post to the database. Furthermore, this shouldn't be happening. The user shouldn't have to reload the page to display the post; the post should display without page refresh on the click of the post button.

So for this, some AJAX is required. And I wrote the basic AJAX for that. This is it (File Name - script.js). And yes, I did include this script.js file on yourposts.php). The code:

$(document).ready(function(){
  $('#pos').on('click',function(){
    var postdata=$("#postContent").val();
    $.ajax({
          type: "POST",
          data:{
          post: postdata
            },
          url: "yourposts.php",
          success: function(){

          }
      });
  });
});

So, I have this AJAX code, but the only question is, what is going to be in the success function? That is the main subject of this question. What will be in that AJAX code which will display the post on the enter of the post and the click of the post button without page refresh, and without sending multiple entries of the same post to the database? Please help.

CodePudding user response：

There is two solutions for this:

1: Create an another php file (getpost.php), and send post id using '$conn->insert_id' using post method. Now, when getpost.php file gets the post id, load the post data of that particular post id. fetch that data using json_decode method.

2: When you insert that post data into database, fetch it's post_id(or whatever you have set the field name in db) using '$conn->insert_id' method. and redirect the page to ?id=post_id, and fetch the post data using get method.

CodePudding user response：

what is going to be in the success function?

it's anything that gets returned from yourscript.php

if you want to display the post without page refresh you can echo "success" from your PHP file, then in the ajax success function, check that if the data == "success", meaning the post is definitely inserted to the DB, you can then append the post to the HTML without needing to connect to DB. like this:

in youscript.php file, by the end of the insertion code, code "success":

    <?php

session_start();

// Making Connection To The Database

$dbHost = "localhost";
$dbUser = "root";
$dbPass = "root";
$database = "feed";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, we could not connect to the database");

// Posting System

if (!empty($_POST['postContent'])) {
  $post = $_POST['postContent'];
  $firstname = $_SESSION['firstname'];
  $lastname = $_SESSION['lastname'];

  $sql = "INSERT INTO posts (firstname, lastname, body, date_posted) VALUES (?, ?, ?, NOW())";
  $stmt = mysqli_stmt_init($connection);
  // nested if statement
  if (!mysqli_stmt_prepare($stmt, $sql)) {
    echo "";
  } else {
    mysqli_stmt_bind_param($stmt, "sss", $firstname, $lastname, $post);
    mysqli_stmt_execute($stmt);
    echo "success";
  }
} else {
  echo "";
}

?>


$(document).ready(function(){
 $('#pos').on('click',function(){
 var postdata=$("#postContent").val();
 $.ajax({
      type: "POST",
      data:{
      post: postdata
        },
      url: "yourposts.php",
      success: function(data){
        if (data == "success") {
            $('.textpostFormat').html(postdata);
        }
      }
  });
});