更新div中的数据 [英] update data in the div
问题描述
我在更新从db显示的数据时遇到问题。最初，当页面打开时，我显示与当前日期相对应的日期，但用户可以通过在文本框中输入日期来更改日期，并且当他单击更新时，应该删除所有显示的数据，并且对应于新日期的数据应该显示。现在我有一个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 =; //清空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'];
//我想先显示此电子邮件，但我不知道如何将其添加到div。
}
}
？>
您可以使用jQuery和AJAX来做到这一点。比听起来简单得多。要查看这是您的正确答案，请查看此内容例子。
在下面的例子中，有两个.PHP文件：test86a.php和test86b.php。
第一个文件86A有一个简单的选择框（下拉框）和一些jQuery代码，用于监视该选择框的变化。要触发jQuery代码，可以使用jQuery .blur（）函数来监视用户离开日期字段，或者使用jQueryUI API：
$（'＃date_start'）。datepicker（{
onSelect：function（dateText，instance）{
//将date_finish分成3个输入字段
var arrSplit = dateText.split（ - ）;
$（'＃date_start -y'）。val（arrSplit [0]）;
$（'＃date_start-m'）。val（arrSplit [1]）;
$（'＃date_start-d'）。val（arrSplit [2]）;
//填充date_start字段（在date_finish字段中添加14天和plunks）
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被触发时，AJAX请求被发送到第二个文件86B 。这个文件会自动从数据库中查找东西，获取答案，创建一些格式化的HTML内容，并且 echo 将其返回到第一个文件。这一切都是通过JavaScript在浏览器上发起的 - 就像你想要的。
这两个文件是一个独立的，完全可行的例子。
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'）;
$ b $（'＃stSelect'）。change（function（）{
var sel_stud = $（this）.val（）;
// alert（'You pick：'+ sel_stud）;
$ .ajax（{
type： POST，
url：test86b.php，//another_php_file.php，
data：'theOption ='+ sel_stud，
success：function（whatigot）{
// alert（'服务器端响应'+ whatigot）;
$（'＃LaDIV'）。html（whatigot）;
$（'＃theButton'）。click（function（） {
alert（'您点击了按钮'）;
}）;
} // END success fn
}）; // END $ .ajax
} ）; // END下拉更改事件
}）; // END document.ready
< / script>
< / head>
< body>
< option value =>请选择< / 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
//登录到数据库（通常这存储在一个单独的php文件中并包含在每个文件中必需）
$ server ='localhost'; // localhost是服务器的常用名称，如果apache / Linux。
$ login ='abcd1234';
$ pword ='verySecret';
$ dbname ='abcd1234_mydb';
mysql_connect（$ server，$ login，$ pword）或die（$ connect_error）; //或死（mysql_error（））;
mysql_select_db（$ dbname）或die（$ connect_error）;
//获取由ajax发布的值
$ selStudent = $ _POST ['theOption'];
//死（'您发送：'。$ selStudent）;
//运行数据库查询
$ query =SELECT`user_id`，`first_name`，`last_name` FROM`users` WHERE`first_name` ='$ selStudent'AND`user_type` ='staff';
$ result = mysql_query（$ query）或者死（'Fn test86.php ERROR：'。mysql_error（））;
$ num_rows_returned = mysql_num_rows（$ result）;
// die（'Query returned'。$ num_rows_returned。'rows。'）;
//准备回应html标记
$ r ='
< h1>在数据库中找到：< / h1>
< ul style =list-style-type：disc;>
';
//解析mysql结果并创建响应字符串。如果（$ num_rows_returned> 0）{
while（$ row = mysql_fetch_assoc（$ result））{
$（
）），响应可以是一个html表，一个完整页面或几个字符
r = $ r。 <李> '。 $ row ['first_name']。 ''。 $ row ['last_name']。 ' - UserID ['。$ row ['user_id']。 ]< /立GT;;
}
}其他{
$ r ='< p>没有学生在该名称上的员工< / p>';
}
//添加额外的按钮以获得乐趣
$ r = $ r。 '< / ul>< button id =theButton>点击我< /按钮>';
//下面回显的响应将被插入
echo $ r;
这里是一个更简单的AJAX示例，但 在图像上悬停并更新页面无需刷新/ 13536043＃13536043>另一个示例
$ b <1>通过jQuery抓取： var sel_stud = $（'＃stSelect'）。val（）;
2）然后通过AJAX发送到第二个脚本。 （ $。ajax（{}） stuff）
第二个脚本使用它接收的值查找答案，然后回应回来的第一个脚本： echo $ r;
第一个脚本收到在AJAX成功函数中回答，然后（仍在成功函数中）注入页面上的答案： $（'＃LaDIV'）。html（whatigot）;
请试用这些简单的示例 - 第一个（更简单）的链接示例不需要数据库查找，因此它应该在没有更改的情况下运行。 b $ b
I have a problem with updating the data I display from my db. Initially, when the page opens I display the date corresponding to the current date but then the user can change the date by entering it in a text box and when he clicks update all the data displayed should be deleted and the data corresponding to the new date should be displayed. Right now I have a javascript function which deleted all the data in the div when the button is clicked. The div holds the data I want to change. But I don't know how to add new data into the div. I tried to add php code to look up the database for the data in the javascript function but I don't know how to add it to the text box.
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.
}
}
?>
}
You can use a combination of jQuery and AJAX to do this. Much simpler than it sounds. To see that this is the right answer for you, just view this example.
In the below example, there are two .PHP files: test86a.php and test86b.php.
The first file, 86A, has a simple selection (dropdown) box and some jQuery code that watches for that selection box to change. To trigger the jQuery code, you could use the jQuery .blur() function to watch for the user to leave the date field, or you could use the 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");
}
});
At any rate, when the jQuery is triggered, an AJAX request is sent to the second file, 86B. This file automatically looks stuff up from the database, gets the answers, creates some formatted HTML content, and echo's it back to the first file. This is all happening through Javascript, initiated on the browser - just like you want.
These two files are an independent, fully working example. Just replace the MYSQL logins and content with your own fieldnames, etc and watch the magic happen.
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;
Here is a more simple AJAX example and yet another example for you to check out.
In all examples, note how the user supplies the HTML content (whether by typing something or selecting a new date value or choosing a dropdown selection). The user-supplied data is:
1) GRABBED via jQuery: var sel_stud = $('#stSelect').val();
2) then SENT via AJAX to the second script. (The $.ajax({}) stuff)
The second script uses the values it receives to look up the answer, then ECHOES that answer back to the first script: echo $r;
The first script RECEIVES the answer in the AJAX success function, and then (still inside the success function) INJECTS the answer onto the page: $('#LaDIV').html(whatigot);
Please experiment with these simple examples -- the first (simpler) linked example doesn't require a database lookup, so it should run with no changes.
这篇关于更新div中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
