Javascript 如何在php中获取当前值？
我使用这个jquery计时器来收集它运行时花费的时间 如何将当前值放入php变量中 我想有一个按钮，当点击保存在输入字段中的当前值 问题是，当我将输入包装成一个表单并希望使用$\u POST['fieldID']来收集值时，它会禁用jqueryTimer 我可以从表单中提取输入字段，但是收集jQuery当前值的最佳方法是什么？编写一个脚本添加，用JQueryTime中的当前值填充隐藏字段 如果调用了暂停和重启，php可用的值也可以更新，这将是理想的 编辑以显示代码：Javascript 如何在php中获取当前值？,javascript,php,jquery,Javascript,Php,Jquery,我使用这个jquery计时器来收集它运行时花费的时间 如何将当前值放入php变量中 我想有一个按钮，当点击保存在输入字段中的当前值 问题是，当我将输入包装成一个表单并希望使用$\u POST['fieldID']来收集值时，它会禁用jqueryTimer 我可以从表单中提取输入字段，但是收集jQuery当前值的最佳方法是什么？编写一个脚本添加，用JQueryTime中的当前值填充隐藏字段 如果调用了暂停和重启，php可用的值也可以更新，这将是理想的 编辑以显示代码： <script src
<script src='https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.6.5/timer.jquery.min.js'></script>
<!-- http://jquerytimer.com/-->
<script>
$(document).ready(function(){
var hasTimer = false;
// Init timer start
$('.start-timer-btn').on('click', function() {
hasTimer = true;
$('.timer').timer({
editable: true
});
$(this).addClass('d-none');
$('.pause-timer-btn, .remove-timer-btn').removeClass('d-none');
});
// Init timer resume
$('.resume-timer-btn').on('click', function() {
$('.timer').timer('resume');
$(this).addClass('d-none');
$('.pause-timer-btn, .remove-timer-btn').removeClass('d-none');
});
// Init timer pause
$('.pause-timer-btn').on('click', function() {
$('.timer').timer('pause');
$('.resume-timer-btn').removeClass('d-none');
});
// Remove timer
$('.remove-timer-btn').on('click', function() {
hasTimer = false;
$('.timer').timer('remove');
$(this).addClass('d-none');
$('.start-timer-btn').removeClass('d-none');
$('.pause-timer-btn, .resume-timer-btn').addClass('d-none');
});
// Additional focus event for this demo
$('.timer').on('focus', function() {
if(hasTimer) {
$('.pause-timer-btn').addClass('d-none');
$('.resume-timer-btn').removeClass('d-none');
}
});
// Additional blur event for this demo
$('.timer').on('blur', function() {
if(hasTimer) {
$('.pause-timer-btn').removeClass('d-none');
$('.resume-timer-btn').addClass('d-none');
}
});
});
$('.timer').each(function() {
console.log( this.val() );
});
</script>
考虑中的想法是在点击时更新隐藏的输入字段，这将允许在PHP中使用它来插入数据库。这是我的建议。它实际上是基于执行ajax请求。当然，在这种情况下不需要表单。如前所述，通过提交表单，当前页面中与计时器相关的所有信息都将丢失，因为提交将刷新计时器所在的整个页面，甚至会重定向到另一个页面（如果需要） 您可以按原样运行我的代码，但需要在INSERT sql语句中更改数据库连接凭据和与数据库表相关的信息 计时器驻留在index.php中。服务器端保存操作是在saveTime.php中执行的——我使用了PDO扩展。数据库连接是在connection.php中创建的 在客户端，通过单击.save timer btn按钮或.pause timer btn按钮启动保存操作-saveTime。但您可以根据自己选择的事件调用saveTime 如果未定义发布的计时器值，PHP代码将发送一个响应头，这将触发ajax请求的错误函数。然后，错误功能将显示危险类型的引导警报。如果传递的计时器状态未被PHP识别，则同样适用。如果保存操作成功，将显示成功警报 注意：我的代码不依赖于您的代码，但它们只是略有不同。这是因为我使用了最新版本0.7.1的计时器和来自的演示中使用的代码。我建议您注意每一行代码。抱歉：-我还使用了3.3.7版的引导 注意：对于正确的错误报告/处理，您可以阅读和阅读文章，因为我没有在PHP代码中实现它 index.php
请向我们展示一些您尝试过的代码，这样我们就有了一个参考点。有点不清楚您想要实现什么。为什么不使用ajax post呢？您说：…将当前值保存在输入字段中。。你说的节约是什么意思？要在提交表单时将当前计时器值保存在db表中？请注意，表单提交会刷新页面，或重定向到其他页面。因此，当前页面中与计时器相关的所有信息都将丢失。是的，目标是能够保存到数据库中。问题是表单逻辑不允许访问输入字段中显示的当前值。是的，如果表单提交，它可能不确定会导致计时器重置。我已经更新了链接页面，使用@Depzor的suggestion jquery.post。但是到目前为止还没有结果，仍然不确定如何将值转换成我可以通过php提交的内容。我已经对您的代码做了一些更改，禁用了插入并更新到Bootstrap 4。我现在尝试使用ajax向saveTime.php页面发送另外两个值。我创建了一篇新帖子，帮助其他人学习ajax的逻辑：
<div class='row'>
<div class='col-md-3'>
<input type='text' name='timer' class='form-control timer' placeholder='0 sec' id="timer" />
</div>
<div class='col-md-9'>
<button class='btn btn-success start-timer-btn'>Start</button>
<button class='btn btn-success resume-timer-btn d-none'>Resume</button>
<button class='btn btn-secondary pause-timer-btn d-none'>Pause</button>
<button class='btn btn-danger remove-timer-btn d-none'>Remove Timer</button>
</div>
</div>
<form action="" method="" id="form1">
<input type="submit">
<input name="currentTime" type="hidden" id="currentTime" value="needed">
</form>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo - Timer</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.1/timer.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var hasTimer = false;
/**
* Save the current timer value.
*
* Performs an ajax request to the server, which will
* save the timer value in a database table and return
* a corresponding message.
*/
function saveTime() {
$.ajax({
method: 'post',
dataType: 'html',
url: 'saveTime.php',
data: {
'time': $('.timer').data('seconds'),
'state': $('.timer').data('state')
},
success: function (response, textStatus, jqXHR) {
displayAlert('success', response);
},
error: function (jqXHR, textStatus, errorThrown) {
/*
* If the status code of the response is the custom one
* defined by me, the developer, in saveTime.php, then I
* can display the corresponding error message. Otherwise,
* the displayed message will be a general user-friendly
* one - so, that no system-related infos will be shown.
*/
var message = (jqXHR.status === 420)
? jqXHR.statusText
: 'An error occurred during your request. Please try again.';
displayAlert('danger', message);
},
complete: function (jqXHR, textStatus) {
//...
}
});
}
/**
* Display a bootstrap alert.
*
* @param type string success|info|warning|danger.
* @param message string Alert message.
* @return void
*/
function displayAlert(type, message) {
var alert = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">'
+ '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'
+ '<span aria-hidden="true">×</span>'
+ '</button>'
+ '<span>' + message + '</span>'
+ '</div>';
$('.messages').html(alert);
}
// Init timer start
$('.save-timer-btn').on('click', function () {
saveTime();
});
// Init timer start
$('.start-timer-btn').on('click', function () {
hasTimer = true;
$('.timer').timer({
editable: true
});
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer resume
$('.resume-timer-btn').on('click', function () {
$('.timer').timer('resume');
$(this).addClass('hidden');
$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
});
// Init timer pause
$('.pause-timer-btn').on('click', function () {
$('.timer').timer('pause');
$(this).addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
saveTime();
});
// Remove timer. Leaves the display intact.
$('.remove-timer-btn').on('click', function () {
hasTimer = false;
$('.timer').timer('remove');
$(this).addClass('hidden');
$('.start-timer-btn').removeClass('hidden');
$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
});
// Additional focus event for this demo
$('.timer').on('focus', function () {
if (hasTimer) {
$('.pause-timer-btn').addClass('hidden');
$('.resume-timer-btn').removeClass('hidden');
}
});
// Additional blur event for this demo
$('.timer').on('blur', function () {
if (hasTimer) {
$('.pause-timer-btn').removeClass('hidden');
$('.resume-timer-btn').addClass('hidden');
}
});
});
</script>
<style type="text/css">
body {
padding: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4>
Timer Demo
</h4>
</div>
</div>
<div class="row">
<div class="col-xs-6 messages"></div>
</div>
<div class="row">
<div class="col-md-3">
<input type="text" id="timer" name="timer" class="form-control timer" placeholder="0 sec">
</div>
<div class="col-md-9">
<button type="button" class="btn btn-success start-timer-btn">
Start
</button>
<button type="button" class="btn btn-success resume-timer-btn hidden">
Resume
</button>
<button type="button" class="btn pause-timer-btn hidden">
Pause
</button>
<button type="button" class="btn btn-danger remove-timer-btn hidden">
Remove Timer
</button>
<button type="button" class="btn btn-primary save-timer-btn">
Save timer value
</button>
</div>
</div>
</div>
</body>
</html>
<?php
require 'connection.php';
// Validate the timer value.
if (!isset($_POST['time']) || empty($_POST['time'])) {
/*
* This response header triggers the ajax error because the status
* code begins with 4xx (which corresponds to the client errors).
* I defined 420 as the custom status code. You can choose whatever
* code between 401 and 499 which is not officially assigned, e.g.
* which is marked as "Unassigned" in the official HTTP Status Code Registry.
* See the link.
*
* @link https://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml HTTP Status Code Registry.
*/
header('HTTP/1.1 420 No time value defined. Did you start the timer?');
exit();
}
// Validate the timer state.
if (!isset($_POST['state']) || empty($_POST['state'])) {
header('HTTP/1.1 420 No timer state recognized. Did you start the timer?');
exit();
}
// Read the posted values.
$time = $_POST['time'];
$state = $_POST['state']; /* The state of the timer when the saving operation was triggered. */
/*
* Save the timer value in a db table using PDO library.
*/
$sql = 'INSERT INTO my_timer_table (
time
) VALUES (
:time
)';
$statement = $connection->prepare($sql);
$statement->execute([
':time' => $time,
]);
// Print success message.
echo 'Time (' . $time . ' seconds) successfully saved when timer was ' . $state . '.';
exit();
<?php
// Db configs.
define('HOST', 'localhost');
define('PORT', 3306);
define('DATABASE', 'yourDb');
define('USERNAME', 'yourUsername');
define('PASSWORD', 'yourPassword');
define('CHARSET', 'utf8');
$connection = new PDO(
sprintf('mysql:host=%s;port=%s;dbname=%s;charset=%s', HOST, PORT, DATABASE, CHARSET)
, USERNAME
, PASSWORD
, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_EMULATE_PREPARES => FALSE,
PDO::ATTR_PERSISTENT => FALSE,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]
);
CREATE TABLE `my_timer_table` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`time` bigint(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;