从 mysql 接收 jquery 进度条值

receive jquery progress bar value from mysql

我无法从 mysql 接收进度条的值。 我的代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>

<div id="progressbar"></div>

<script>
$( "#progressbar" ).progressbar({
  value: 100 //<----- here i need to put value from mysql table
});
</script>

</body>
</html>

感谢您的帮助

我正在尝试做这样的事情:

<?php
$sql = "SELECT * FROM tbl_progress WHERE id = '1' 
$conn = mysqli_connect('host','user','pass','database');
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_row($result);
$progress = $row['progress'];
?>

和:

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;"><?php echo $progress; ?>
</div>
</div>

请有人帮助我!

您可以在脚本标签内使用 php。 PHP 在 JS 之前执行,所以你的 javascript 将具有 $progress:

的值
<script>
$( "#progressbar" ).progressbar({
  value: <?php echo $progress; ?>
});
</script>

我建议您使用 jQuery $.get() 方法并像这样使用它:

例如我们有一个名为 progress_bar.php 的文件,它的内容是:

<?php 
$sql = "SELECT * FROM tbl_progress WHERE id = '1'"; 
$conn = mysqli_connect('host','user','pass','database');
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_row($result);
echo json_encode(array('value' => $row['progress']));
?>

以及带有进度条的页面:

<div id="progressbar"></div>

<script>
$.get('progress_bar.php',function(data){
var pb = $.parseJSON(data);    
$( "#progressbar" ).progressbar({ value: pb.value });    
});
</script>

或者如果你想将 ID 传递给你的 query 然后使用 $.post() 方法和 在 progress_bar.php 中进行以下更改:

<?php 
$id = $_POST['id'];        
$sql = "SELECT * FROM tbl_progress WHERE id = '$id'"; 

和JS部分:

 <script>
 $.post('progress_bar.php', { id: 1 }, function(data){
 var pb = $.parseJSON(data);    
 $( "#progressbar" ).progressbar({ value: pb.value });    
 });
 </script>