Question

我正在开发一个程序，但我是js / jQuery / Ajax的新手。我试图从表单（html）获取用户输入并将其发送到php文件，该文件将数据插入MySQL数据库，然后最终将信息吐出到div中。我按提交，但我的用户提交的数据没有插入数据库。我最初通过标签（action =“post.php”）将提交重定向到我的php文件，该标签在将数据插入mysql数据库方面起作用，但在提交时也将其重定向到该post.php文件。 / p>

my js file datawire.js：

$( 'button#submit').on('click', function() {
  var uName = $('input#uName').val();
  var uMessage = $('input#uMessage').val();

  if ($.trim(uName) != '' && $.trim(uMessage) != '') {
    $.post('post.php', {username: uName, message: uMessage}, function(data) {
      $('div#viewer').text(data);
    });
  }
});

我的php文件post.php

 <?php include("config.php");
$username = isset($_POST['username']);
$message = isset($_POST['message']);
if (($username && $message) && (empty($_POST['username'] === false) && empty($_POST['message']) === false)) {
    $username = $_POST['username']; 
    $message = $_POST['message'];

    // insert into database
    $nowTime = getDateTime();
    $userIp = getIp();
    $sql = "INSERT INTO commentdb (id,username, message,date,ip) VALUES ('','$username','$message', '$nowTime', '$userIp') ";
    $result = mysql_query($sql);    
} 
?>

和我的HTML文件：

<html>
    <head>        
        <!-- latest jQuery direct from google -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <!-- for getting data -->
        <script  src="datawire.js"></script>

        <!-- for posting data -->
        <script type="text/javascript">
            $(document).ready(function() {
              $('#viewer').load("getdata.php");
            });
        </script>
    </head>
    <body>
            <div id="viewer">   </div>
            <br>
            <!-- User form -->
            <form method='post'>
            <input type="text" id="uName" name="username" placeholder="Name" value="" maxlength="15" />
            <br />
            <input type="text" id="uMessage" name="message" placeholder="Message" value="" maxlength="100" />
            <br />
            <button id="submit" type="submit">Submit!</button> <button type="reset">Clear!</button>
            </form>           
    </body>
</html>

Answer 1

使用preventDefault（）函数阻止您的表单提交

$( 'button#submit').click(function(e) {
    e.preventDefault();
    var uName = $('input#uName').val();
    var uMessage = $('input#uMessage').val();

    if ($.trim(uName) != '' && $.trim(uMessage) != '') {
        $.post('post.php', {username: uName, message: uMessage}, function(data) {
            $('div#viewer').text(data);
         });
     }
});

像这样从服务器返回短信

<?php include("config.php");
$username = isset($_POST['username']);
$message = isset($_POST['message']);
if (($username && $message) && (empty($_POST['username'] === false) && empty($_POST['message']) === false)) {
    $username = $_POST['username']; 
    $message = $_POST['message'];

    // insert into database
    $nowTime = getDateTime();
    $userIp = getIp();
    $sql = "INSERT INTO commentdb (id,username, message,date,ip) VALUES ('','$username','$message', '$nowTime', '$userIp') ";
    $result = mysql_query($sql);    

   if($result)
   {
    echo " Data Inserted Successfully";
   }else{
    echo " Data insert failed - ".mysql_error();
   }
}else{

  echo " Required fields are missing";

} 
?>

Answer 2

尝试使用$（document）.ready包装datawire.js的内容，就像在html文件中一样。这确保了$在使用之前实际定义。

使用javascript和php推送MySQL数据

2 个答案: