ページを更新せずにデータを送信してフェッチする

Question

私はphpとmySQLを初めて使いました。私はウェブページを作成しました。本質的には掲示板です。ページにはコンテンツを送信するためのフォームがあり、コンテンツは瞬間的に下に表示されます。送信ボタンが押されたときにコンテンツが表示されますが、送信が成功したことを示すエコーがフォームに表示された直後にコンテンツを送信したい場合に表示されます。誰かが、ページをリフレッシュすることなく、ユーザーが順番にコンテンツを送信できるように、ページを機能させるための正しい方向で私を指摘できますか？どんな助けでも大歓迎です。厄介なコードのお詫び。

これは私の入力コードです：

 if(! $conn) { 
      die('Could not connect: ' . mysql_error()); 
     } 

     if(! get_magic_quotes_gpc()) { 
      $name = addslashes ($_POST['name']); 
      $proposal = addslashes ($_POST['proposal']); 
     }else { 
      $name = $_POST['name']; 
      $proposal = $_POST['proposal']; 
     } 

     $email = $_POST['email']; 

     $sql = "INSERT INTO db3". "(name, proposal, email, join_date) 
      VALUES('$name','$proposal','$email', NOW())"; 

     mysql_select_db('_db'); 
     $retval = mysql_query($sql, $conn); 

     if(! $retval) { 
      die('Could not enter data: ' . mysql_error()); 
     } 

     echo "<div class='msg-box' id='msg-box'>Entered data successfully</div>\n"; 

     mysql_close($conn); 

これは私のフォームです：

<form name="submission" method = "post" action = "<?php $_PHP_SELF ?>" > 

     <fieldset> 
     <input name = "name" type = "text" 
         id = "name" placeholder="Name..." required autocomplete="off"> 

     <input name = "email" type = "text" 
         id = "email" placeholder="example@gmail.com..." autocomplete="off"> 

     <textarea name = "proposal" type = "textarea" maxlength="1000" 
         id = "proposal" placeholder="Your proposal goes here..." required autocomplete="off"></textarea> 


     </fieldset> 

     <fieldset> 
     <input name = "add" type = "submit" id = "add" value = "Submit"> 
     </fieldset> 

</form> 

これは私の検索コードです：

$conn = mysql_connect($dbhost, $dbuser, $dbpass); 

    if(! $conn) { 
    die('Could not connect: ' . mysql_error()); 
    } 

    $sql = 'SELECT id, name, proposal FROM db3 ORDER BY ID DESC '; 

    mysql_select_db('_db'); 
    $retval = mysql_query($sql, $conn); 

    if(! $retval) { 
     die('Could not get data: ' . mysql_error()); 
    } 

    while($row = mysql_fetch_array($retval, MYSQL_ASSOC)) { 
    echo 
     "<article>". 
     " <div class='id'> ID :{$row['id']} </div> ". 

     " <section> <p> {$row['proposal']} </p></section> ". 
     " <section class='name'><h3> {$row['name']} </h3></section> ". 
     "</article>" 
     ; 

    } 


    mysql_close($conn); 
    ?> 

Answer 1

このコードを使用します。

この1でフォームの行を変更してください：

<form name="submission" id="submission" method = "post" action = "<?php $_PHP_SELF ?>" > 

Answer 2

はあなたがそれを処理するPHPスクリプトにデータを送信するためにJavaScriptを使用しますAJAX

使用してこれを行うことができます。同じスクリプトでは、送信したばかりの新しいデータが返され、ページに表示することができます。

例は

HTML

<form id="comment"> 
    <input type="text" id="userInput" name="comment" placeholder="Tell us what you feel about this" /> 
    <input type="submit" value="Submit" /> 
</form> 

だろうjQueryの

<script> 

    $("#comment").on('submit', function(e) { 

    // Stop the form from being submitted the standard way 
    e.preventDefault(); 

    // Put the user's input into a variable 
    var userInput = $('#userInput').val(); 

    // Do some validation of the data if needed 
    // ... 
    // ... 



    // Perform AJAX request (a.k.a send the data to the server) 
    $.ajax({ 

     // There are many parameters one can use here 
     // Browse the documentation to get familiar with the most useful ones 

     url: 'proccess.php', // The PHP script that will handle the request 
     type: 'POST',   // This can be set to GET, but in this case we'd use POST 
     data: { comment: userInput }, // "comment" will result in $_POST['comment'], and userInput is the value of it 

     // If the script returns a 200 status (meaning the request was successful) 
     success: function(data) { 

     // The data variable will be the response from the PHP script 
     // Depending on what you are going to do with the data returned, 
     // you may want to ensure it is returned as valid JSON 

     }, 

     error: function() { 

     // The request failed - So something here 
     // ... 
     // ... 

     } 

    }); 

    }); 

</script> 

PHP（process.php）

<?php 

    $data = $_POST['comment']; 

    // Do all you would normally do when submitting a post 
    // ... 
    // ... 

    // Now, upon successfully storing the data in your database, 
    // you can return something to the 'data' variable in the AJAX.success function 


?> 

AJAXとjQueryのいくつかの研究を行います。これは本当に面白いです