我使用这个 jquery 计时器来收集它运行时所花费的时间。
https://github.com/walmik/timer.jquery
如何将当前值存入 php 变量？
我想要一个按钮，单击该按钮可将当前值保存在输入字段中。
问题是，当我将输入包装在表单中并希望使用 $_POST['fieldID'] 来收集值时，它会禁用 jqueryTimer。
我可以从表单中提取输入字段，但是收集 jQuery 提供的当前值的最佳方法是什么？编写一个脚本添加，用 jQueryTimer 的当前值填充隐藏字段？
如果调用暂停和重新启动，php 可用的值也可以更新，那就太理想了。
编辑以显示代码:
<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>
html:
<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>
目标:能够将当前值作为 php var，以便可以将其提交到数据库。
之前的尝试发现，如果输入位于表单标记内，则不再起作用。
考虑的想法是在点击时更新隐藏的输入字段，这将允许在 PHP 中使用它来插入数据库。
最佳答案
这是我的建议。它确实基于执行 ajax 请求。当然，在这种情况下不需要表格。正如已经评论过的，通过提交表单，当前页面中与计时器相关的所有信息都将丢失，因为提交将刷新计时器所在的整个页面，或者甚至会重定向到另一个页面 - 如果需要的话。 p>
您可以按原样运行我的代码，但您需要更改 INSERT sql 语句中的数据库连接凭据和数据库表相关信息。
计时器驻留在index.php中。服务器端保存操作在 saveTime.php 中执行 - 我使用了 PDO 扩展。数据库连接在connection.php中创建。
在客户端，保存操作 - saveTime() - 通过单击 .save-timer-btn 按钮或 .save-timer-btn 启动。暂停计时器 btn 按钮。但是您可以对您选择的事件调用saveTime()。
如果未定义发布的计时器值，PHP 代码会发送一个响应 header ，这会触发 ajax 请求的错误函数。然后，错误函数将显示危险类型的引导警报。如果 PHP 无法识别传递的计时器状态，则同样适用。如果保存操作成功，将显示成功警报。
注意:我的代码不依赖于您的代码，但它们只是略有不同。这是因为我使用了计时器的最新版本(0.7.1)以及来自 jquerytimer.com 的演示中使用的代码。 。我建议您注意每一行代码。抱歉 :-) 我还使用了 Bootstrap 版本 3.3.7。
注意:为了正确报告/处理错误，您可以阅读 this和 this文章，因为我没有在我的 PHP 代码中实现它。
index.php
<!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>
saveTime.php
<?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
<?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;
关于javascript - jQuery.timer如何获取php中的当前值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49327105/