提交并获取数据而不刷新页面

时间:2016-07-02 23:14:30

标签: javascript php mysql ajax forms

我是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);
   ?>

2 个答案:

答案 0 :(得分:0)

使用此代码:

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

答案 1 :(得分:0)

您可以使用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进行一些研究。使用

非常有趣