Question

我从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>

有人帮帮我！

Answer 1

您可以在脚本标记内使用php。 PHP在JS之前执行，因此您的javascript将具有值$progress：

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

Answer 2

我建议您使用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>

从mysql接收jquery进度条值

2 个答案: