使用javascript和php推送MySQL数据

Pushing in MySQL data with javascript and php

本文关键字：MySQL 数据 推送 php javascript 使用      更新时间：2023-09-26

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

我的js文件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>

试着像在html文件中那样用$（document）.ready包装datawire.js的内容。这确保了$在使用之前已经被实际定义。

使用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";
} 
?>
相关文章：