jQuery.timer如何在php中获取当前值?

您可以按原样运行我的代码，但是您需要在 INSERT sql语句中更改数据库连接凭据和与数据库表相关的信息.计时器驻留在 index.php 中.服务器端保存操作在 saveTime.php 中执行-我为其使用了PDO扩展名.数据库连接是在 connection.php 中创建的.在客户端，通过单击 .save-timer-btn 按钮或启动保存操作- saveTime(). pause-timer-btn 按钮.但是您可以根据自己选择的事件调用 saveTime().如果未定义发布的计时器值，则PHP代码将发送响应标头，从而触发ajax请求的 error 函数.然后， error 函数将显示 danger 类型的引导警报.如果PHP无法识别所传递的计时器状态，则同样适用.如果保存操作成功，将显示成功警报.注意:我的代码不依赖您的代码，但它们只是稍有不同.这是因为我使用了计时器的最新版本( 0.7.1 )和演示中使用的代码 jquerytimer.com .我建议您注意每个代码行.抱歉:-)我还使用了Bootstrap的 3.3.7 版本.注意:有关正确的错误报告/处理，您可以阅读此和这篇文章，因为我没有在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" />  <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 <?phprequire '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(); connection.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;I'm using this jquery timer to collect time spent while it is running.https://github.com/walmik/timer.jqueryhttp://jquerytimer.com/How to I get the current value into a php variable?I'd like to have a Button that when clicked saves the current value in the input field.Problem is that when I wrap the input in a form and expect to use a $_POST['fieldID'] to collect the value it disables the jqueryTimer.I can pull the input field out of the form but what is the best means to collect the current value presented with jQuery? Write a script addition that populates a hidden field with the current value from jQueryTimer?It would be ideal if the value available to php could also be updated if the Pause and restart is invoked.EDIT TO SHOW CODE:<script src='https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.6.5/timer.jquery.min.js'></script><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>GOAL: Be able to have the current value as a php var so it can be submitted to a database.Prior attempts found that if the input was within a form tag it no longer worked.Idea in consideration is updating the hidden input field on some click which would allow it to be used in PHP to Insert to DB. 解决方案 Here is my proposal. It's indeed based on performing an ajax request. A form is, of course, not needed in this case. As already commented, by submitting a form, all informations related to the timer in the current page would be lost, because the submit would refresh the whole page where the timer resides, or would even redirect to another page - if so demanded.You can run my code as it is, but you need to change the db connection credentials and the db table related infos in the INSERT sql statement.The timer resides in index.php. The server-side saving operation is performed in saveTime.php - I used the PDO extension for it. The database connection is created in connection.php.On the client-side, the saving operation - saveTime() - is started by clicking the .save-timer-btn button, or the .pause-timer-btn button. But you can call saveTime() on the events of your choice.If the posted timer value is not defined, the PHP code sends a response header, which triggers the error function of the ajax request. The error function will then display a bootstrap alert of type danger. The same applies if the passed timer state is not recognised by PHP. If the saving operation succeeds, a success alert will be displayed.Note: My codes don't rely on your codes, but they are just slightly different. This is because I used the last version (0.7.1) of the timer and the code used in the demo from jquerytimer.com. I suggest you to pay attention to each code line. Sorry :-) I also used the version 3.3.7 of Bootstrap.Note: For proper error reporting/handling you could read this and this articles, since I didn't implement it in my PHP code.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" />  <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<?phprequire '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();connection.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 syntaxCREATE 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; 这篇关于jQuery.timer如何在php中获取当前值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！