从PHP内部更新JS ProgressBar由AJAX调用循环?

时间:2014-11-26 14:54:35

标签: javascript php ajax while-loop progress-bar

我有一个带有表单的PHP页面。提交表单后,它通过AJAX调用另一个PHP页面来调用MySQL,然后处理结果,并将它们返回到第一个PHP页面。 MySQL处理发生在while循环内。我想更新一个指示循环进度的进度条。但我明白了:

  

parsererror
  SyntaxError:JSON.parse:JSON数据的第1行第1列的意外字符

没有任何反应。如果我在下面做的事情是错误的,任何想法?如何从名为while循环的AJAX更新进度条?

以下是粗略的代码:

主PHP页面:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="jquery-ui.css">
        <script type='text/javascript' src='jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='jquery-ui-1.10.4.min.js'></script>
        <script type='text/javascript' src='my.js'></script>
    </head>

    <body onLoad="onLoad()">

        <form action="" method="POST" id="myForm" name="myForm">  
            <div id="progressBar"></div>
            <input class="txt" 
               id="btnSubmit" 
               style="margin-top: 12pt; font-family: arial; color: grey; font-weight: bold; font-size: 15pt;" 
               type="submit" 
               name="action"
               value="SEARCH" />
        </form>
    </body>
</html>

my.js有:

function onLoad() {
    $('#progressBar').progressbar({ disabled: true });
    $('#progressBar').hide(); 
}

$(document).ready(function() {
    $("#myForm").submit(function(event) {
         $(function () {
             .ajax({
                 url: 'myCall.php',           // the script to call to get data
                 type: "POST", 
                 data: { data: 'something'}
             }, 
             dataType: 'json',
             success: function(data) {
                 // do something
             }, 
             error: function (jqXHR, textStatus, errorThrown){
                 console.log(textStatus, errorThrown);
             },


         });


    });
});

myCall.php有一些调用MySQL数据库,然后进行后处理:

$result = mysqli_query($mysqli, $sql); 

$j = 1; 
// enable and show the bar
echo '<script language="javascript"></script>';
echo '$("#progressBar").show();';
echo '$("#progressBar").progressbar({';
echo 'disabled: false,';
echo 'value: '.$j.',';
echo 'max: '.$result->num_rows.',';
echo '});';
echo '</script>';

while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
    // doing stuff and then update the bar
    // update
    echo '<script language="javascript"></script>';
    echo '$("#progressBar").progressbar({';
    echo 'value: '.$j.',';
    echo '});';
    echo '</script>';
}
// disable and hide the bar
echo '<script language="javascript"></script>';
echo '$("#progressBar").progressbar({';
echo 'disabled: true,';
echo '});';
echo '$("#progressBar").hide();'; 
echo '</script>';

1 个答案:

答案 0 :(得分:1)

您正在解析的JSON看起来不是有效的JSON。我打印出你试图通过解析器运行的JSON,并通过http://jsonformatter.curiousconcept.com/等JSON验证器运行它。

此外,以下代码对我来说看起来不干净,这可能会导致问题。我不确定您是否使用更标准化的JSON解析器。如果是这样,它可能不会期望数据对象内的数据对象。这是一个完整的猜测,但你应该改变

         .ajax({
             url: 'myCall.php',           // the script to call to get data
             type: "POST", 
             data: { data: 'something'}
         }, 

         .ajax({
             url: 'myCall.php',           // the script to call to get data
             type: "POST", 
             data: { "key1" : "value1"}
         }, 

我认为你实际上并没有在你的问题中显示JSON的解析位置。您是否能够准确显示解析它的方式以及解析的内容?

谢谢!