javascript - 无需刷新页面即可提交和获取数据

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 ?>" >