2

我在更新从数据库显示的数据时遇到问题。最初，当页面打开时，我显示与当前日期相对应的日期，但随后用户可以通过在文本框中输入日期来更改日期，当他单击更新时，应删除所有显示的数据并与新日期相对应的数据应显示。现在我有一个 javascript 函数，当单击按钮时，它会删除 div 中的所有数据。div 包含我要更改的数据。但我不知道如何将新数据添加到 div 中。我尝试添加 php 代码以在 javascript 函数中查找数据库中的数据，但我不知道如何将其添加到文本框中。

function changedate()
{
    document.getElementById("label1").innerText=document.getElementById("datepicker").valu e;
    document.getElementById("selecteddate").innerText=document.getElementById("datepicker"  ).value;
    document.getElementById("teammembers").innerHTML = "";//empties the div(teammembers)

    <?php
    $con=mysqli_connect("localhost","*****","*****","*****");
    $result = mysqli_query($con,"SELECT * FROM users");
    while($row = mysqli_fetch_array($result))
    {
        if(trim($user_data['email'])!=trim($row['email']))
        {
            $email_users = $row['email'];
            //I want to first show this email but I don't know how to add it to the div.
        }
    }
    ?>
}
4

3 回答 3

0

您可以结合使用 jQuery 和 AJAX 来执行此操作。比听起来简单得多。要查看这是适合您的正确答案，请查看此示例。

在下面的示例中，有两个 .PHP 文件：test86a.php 和 test86b.php。

第一个文件 86A 有一个简单的选择（下拉）框和一些 jQuery 代码，用于监视该选择框的变化。要触发 jQuery 代码，您可以使用 jQuery.blur()函数来监视用户是否离开日期字段，或者您可以使用 jQueryUI API：

$('#date_start').datepicker({
    onSelect: function(dateText, instance) {

        // Split date_finish into 3 input fields                        
        var arrSplit = dateText.split("-");
        $('#date_start-y').val(arrSplit[0]);
        $('#date_start-m').val(arrSplit[1]);
        $('#date_start-d').val(arrSplit[2]);

        // Populate date_start field (adds 14 days and plunks result in date_finish field)
        var nextDayDate = $('#date_start').datepicker('getDate', '+14d');
        nextDayDate.setDate(nextDayDate.getDate() + 14);
        $('#date_finish').datepicker('setDate', nextDayDate);
        splitDateStart($("#date_finish").val());
    },
    onClose: function() {
        //$("#date_finish").datepicker("show");
    }
});

无论如何，当触发 jQuery 时，会向第二个文件 86B 发送 AJAX 请求。该文件自动从数据库中查找资料，获取答案，创建一些格式化的 HTML 内容，然后echo将其返回到第一个文件。这一切都是通过 Javascript 在浏览器上启动的——就像你想要的那样。

这两个文件是一个独立的、完整的示例。只需将 MYSQL 登录名和内容替换为您自己的字段名等，然后观看奇迹发生。

TEST86A.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "test86b.php", // "another_php_file.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>
    </head>
<body>

    <select name="students" id="stSelect">
        <option value="">Please Select</option>
        <option value="John">John Doe</option>
        <option value="Mike">Mike Williams</option>
        <option value="Chris">Chris Edwards</option>
    </select>
    <div id="LaDIV"></div>

</body>
</html>

TEST86B.PHP

<?php

//Login to database (usually this is stored in a separate php file and included in each file where required)
    $server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
    $login = 'abcd1234';
    $pword = 'verySecret';
    $dbname = 'abcd1234_mydb';
    mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
    mysql_select_db($dbname) or die($connect_error);

//Get value posted in by ajax
    $selStudent = $_POST['theOption'];
    //die('You sent: ' . $selStudent);

//Run DB query
    $query = "SELECT `user_id`, `first_name`, `last_name` FROM `users` WHERE `first_name` = '$selStudent' AND `user_type` = 'staff'";
    $result = mysql_query($query) or die('Fn test86.php ERROR: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);
    //die('Query returned ' . $num_rows_returned . ' rows.');

//Prepare response html markup
    $r = '  
            <h1>Found in Database:</h1>
            <ul style="list-style-type:disc;">
    ';

//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<li> ' . $row['first_name'] . ' ' . $row['last_name'] . ' -- UserID [' .$row['user_id']. ']</li>';
        }
    } else {
        $r = '<p>No student by that name on staff</p>';
    }

//Add this extra button for fun
    $r = $r . '</ul><button id="theButton">Click Me</button>';

//The response echoed below will be inserted into the 
    echo $r;

这是一个更简单的 AJAX 示例，还有另一个示例供您查看。

在所有示例中，请注意用户如何提供 HTML 内容（无论是通过键入内容、选择新日期值还是选择下拉选项）。用户提供的数据是：

1) 通过 jQuery 抓取：var sel_stud = $('#stSelect').val();

2) 然后通过 AJAX 发送到第二个脚本。（$.ajax({})东西）

第二个脚本使用它接收到的值来查找答案，然后将答案回显给第一个脚本：echo $r;

第一个脚本在 AJAX 成功函数中接收答案，然后（仍在成功函数中）将答案注入页面：$('#LaDIV').html(whatigot);

请尝试这些简单的示例——第一个（更简单的）链接示例不需要数据库查找，因此它应该在没有更改的情况下运行。

于 2013-05-31T16:30:52.933 回答
0

你想用你从 php 得到的任何东西输出一个文字 JS 语句，基本上：

document.getElementById("teammembers").innerHTML = // notice no erasing, we just
                                                   // overwrite it directly with the result

"<?php
  $con=mysqli_connect("localhost","*****","*****","*****");
  $result = mysqli_query($con,"SELECT * FROM users");
  while($row = mysqli_fetch_array($result))
  {
      if(trim($user_data['email'])!=trim($row['email']))
      {
          $email_users = $row['email'];
          //I want to first show this email but I don't know how to add it to the div.
          // so just show it!
          echo $email_users;     // think about this for a second though
                                 // what are you trying to achieve?
      }
  }
  ?>"
于 2013-05-31T17:11:54.753 回答
-1

这是一个很大的问题，不是很具体。查看有关 AJAX 请求的更多信息 - 基本上来自 javascript，您将调用检索数据的服务器。这是来自 javascript 库jQuery的片段：

   $.ajax({
  type: "POST",
  url: "emails.php",
  data: { user: "John" }
}).done(function( msg ) {
  $('teammembers').html(msg);
});

希望这会给你一个起点

于 2013-05-31T16:30:24.793 回答