更新 div 中的数据
Posted
技术标签:
【中文标题】更新 div 中的数据【英文标题】：update data in the div 【发布时间】：2013-05-27 12:44:35 【问题描述】：我在更新从数据库中显示的数据时遇到问题。最初，当页面打开时，我显示与当前日期相对应的日期，但随后用户可以通过在文本框中输入日期来更改日期，当他单击更新时，应删除所有显示的数据，并与新日期相对应的数据应显示。现在我有一个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.
?>
【问题讨论】：
您需要对返回新数据的 php 脚本进行 ajax 调用，然后在 ajax 成功处理程序中使用新数据更新您的 div。 你不能这样混合javascript代码和php代码，它们是独立的，javascript运行在客户端（浏览器），而php运行在服务器上。 【参考方案1】：这是一个很大的问题，不是很具体。查看有关 AJAX 请求的更多信息 - 基本上来自 javascript，您将调用检索数据的服务器。 这是来自 javascript 库 jQuery 的 sn-p：
$.ajax(
type: "POST",
url: "emails.php",
data: user: "John"
).done(function( msg )
$('teammembers').html(msg);
);
希望这会给你一个起点
【讨论】：
【参考方案2】：您可以结合使用 jQuery 和 AJAX 来执行此操作。比听起来简单得多。要知道这是适合您的正确答案，just view this example。
在下面的例子中，有两个 .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;
这里是 a more simple AJAX example 和 another example 供您查看。
在所有示例中，请注意用户如何提供 HTML 内容（无论是通过键入内容、选择新日期值还是选择下拉选项）。用户提供的数据是：
1) 通过 jQuery 抓取：var sel_stud = $('#stSelect').val();
2) 然后通过 AJAX 发送到第二个脚本。 （$.ajax() 的东西）
第二个脚本使用它收到的值来查找答案，然后回显第一个脚本的答案：echo $r;
第一个脚本在 AJAX 成功函数中接收答案，然后（仍在成功函数内部）将答案注入页面：$('#LaDIV').html(whatigot);
请尝试这些简单的示例——第一个（更简单的）链接示例不需要数据库查找，因此它应该无需更改即可运行。
【讨论】：
【参考方案3】：你想用你从 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?
?>"
【讨论】：
以上是关于更新 div 中的数据的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript setInterval 函数不更新 <div> 元素中的 Gridview