jQuery.Timer Ajax将多个表单值发送到辅助页面
我正在使用这个jquery计时器来收集它运行时花费的时间。
https://github.com/walmik/timer.jquery http://jquerytimer.com/
在之前的Stack Overflowpost中，我们能够使用jQuery Ajax（ jQuery.timer如何在php中获取当前值？ ）将当前累积时间发布到另一个页面。 许多人都想到@Dakis
我们目前的解决方案似乎是试图节省定时器的任何停止和重启。 如果选择“保存时间和注释”按钮，则只需执行“保存到数据库”例程。
我一直在研究jQuery Ajax并理解需要将一个键/值对发送到服务器/接收页面。 我理解第一个值标识了从中获取“密钥”的目标，但我无法清楚地理解第二个“值”的正确格式。 ‘task’：$（’。ta_tasks’）。data（’task’）似乎没有按预期传递值。
我添加了一个ID为“ta_tasks”的TextArea，并附加了当前正在运行的AJAX：
data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('.ta_tasks').data('task') 在接收页面上，我添加了一个简单的警报，以查看是否正在接收该值，但事实并非如此。 如果我可以弄清楚如何正确发送TextArea的内容，我还可以弄清楚如何从“保存时间和注释”按钮提交一个值，以便暂停和重新启动也不会提交到数据库。
工作页面： http ： //sgdesign.com/timer2.php
父页面脚本：
$(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'), 'task': $('.ta_tasks').data('task') }, 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 = '' + '' + '' + message + '' + ''; $('.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('d-none'); $('.pause-timer-btn').removeClass('d-none'); }); // Init timer resume $('.resume-timer-btn').on('click', function () { $('.timer').timer('resume'); $(this).addClass('d-none'); $('.pause-timer-btn').removeClass('d-none'); }); // Init timer pause $('.pause-timer-btn').on('click', function () { $('.timer').timer('pause'); $(this).addClass('d-none'); $('.resume-timer-btn').removeClass('d-none'); saveTime(); }); // Remove timer. Leaves the display intact. $('.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('hidden'); } }); // Additional blur event for this demo $('.timer').on('blur', function () { if (hasTimer) { $('.pause-timer-btn').removeClass('d-none'); $('.resume-timer-btn').addClass('d-none'); } }); });
目标网页内容：
prepare($sql); $statement->execute([ ':time' => $time, ]); // Print success message. echo 'Time (' . $time . ' seconds) successfully saved when timer was ' . $state . '.'; exit(); */ ?> Untitled Document var a = ""; alert ('task: ' + a); diff($dtT)->format('%h hours, %i minutes and %s seconds'); // return $dtF->diff($dtT)->format('%a days, %h hours, %i minutes and %s seconds'); } ?> <?php echo secondsToTime($time); echo '
'; echo 'Tasks: '.$task .'
'; echo 'Cost: $'. $rate; ?>
目标摘要正确格式化数据：’任务’：$（’。ta_tasks’）。数据（’任务’）了解为什么如何在“节省时间和注释”按钮调用节省成本时进行传输和DB的注释
不要在$(document).ready定义函数。 带他们到外面去。
PHP中的函数应仅驻留在用于此目的的页面中。 请参阅PSR-1副作用 。 原则上你应该阅读：PSR-1和PSR-2。 可选，尤其是PSR-4。
当您尝试读取通过ajax发送的值时，您应该读取值，而不是CSS选择器。 所以：错了： $task = $_POST['ta_tasks']; ，更正： $task = $_POST['task']; 。
在validation发布的值之前（在页面saveTime.php页面上 ），你不应该声明任何变量或做其他事情 – 所以说。 所以没有$cost = 50; 在validation之前，但在它们之后。 但是，如果你想为saveTime.php定义常量，那么最好将它们放在另一个文件中，你可以包含它。
在这种情况下， data()方法是http://jquerytimer.com的专有方法！ 您可以使用它来获取某些值（计时器值，计时器状态等）。 但是，为了获取html控件的值，您需要使用val() ， text()或innerHtml等。总之：native js或jquery方法/函数。 所以，使用这样：
data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('#ta_tasks').val() }
你看到选择器（ '#ta_tasks' ）了吗？ 它引用了一个id（因为# ）。 您使用了.ta_tasks ，因此引用了类名。 你没有定义。
更好：对html id和名称使用camelCase命名约定，为css类使用“连字符分隔”forms：
data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'task': $('#ta_tasks').val() } //...
尽可能避免从javascript或css代码引用php代码。 如果你需要一个javascript代码中的php值，那么将它传递给javascript函数 – 作为参数，或者将php值保存在html控件的属性中，并通过js / jquery方法/函数引用属性来读取它。 例如，请参阅saveTime.php中的代码，该代码将任务值保存在隐藏的输入中并从js代码中提醒它。
的index.php
Demo - Timer Timer Demo 2
Notes to accompany task:
saveTime.php
'; echo 'Tasks: ' . $task . '
'; echo 'Cost: $' . $rate; ?>
的functions.php
diff($dtT)->format('%h hours, %i minutes and %s seconds'); // return $dtF->diff($dtT)->format('%a days, %h hours, %i minutes and %s seconds'); }
编辑1：在index.php中 ，我将js函数带到了$(document).ready 。 我忘了早点做。
编辑2：将hidden更改为d-none in
$('.resume-timer-btn').removeClass('hidden');
编辑3：我发现了我评论过的问题。 它在我的saveTime.php代码中：我加载了jquery库，但它已经在index.php中加载了。 更多内容：因为你在一个已经加载了所有资源的html页面（ index.php ）中加载了saveTime.php的内容， 所以你不需要将saveTime.php构造成一个完整的结构化html（带有doctype，头，身体等）。 仅仅定义所需的内容和脚本标记就足够了。 所以，我相应地重新编写了saveTime.php 。
textarea没有ta_tasks类，你使用id并且它没有html5 data object ，更正为$("#ta_tasks").val() 。
检查你发送的ajax请求数据和你在saveTime.php中获得的数据，你发送’task’并在saveTime.php中接收’ta_task’
$.ajax({ method: 'post', dataType: 'html', url: 'saveTime.php', data: { 'time': $('.timer').data('seconds'), 'state': $('.timer').data('state'), 'ta_task': $('.ta_tasks').data('task') }, //other codes here
//saveTime.php //now get the value with 'ta_task' $task = $_POST['ta_task'];