在不刷新页面的情况下提交和获取数据

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

使用此代码：

<script>
submitHandler: function(form) {
            $.ajax({
                url: '',
                type: 'POST',
                data: $("#submission").serialize(),
                success: function() {
                  alert('submitted data: '$("#submission").serialize());
            return false;

                }
            });
        }
    </script>

请用这个更改表格行：

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

Answer 2

您可以使用AJAX 来做到这一点

您将使用 javascript 将数据发送到将处理它的 PHP 脚本。相同的脚本将返回刚刚提交的新数据，以便您可以将其显示在页面上。

一个例子是

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 的研究。合作真的很有趣