AJAX发布到PHP,计算总和并返回

时间:2014-04-26 20:34:51

标签: javascript php jquery html ajax

我在html中有一个表,我在ajax中发送一个带有2个数组的POST,一个名为rowValues,包含3个数组,每行一个。还有一个名为columnValues的数组,每个列包含3个数组。

我发布好了,但问题是:如何在PHP中计算每一行和每一列的总和,并对成功函数进行回显,显示类#34; totalCol"和"总计"每列和每行?

这是我的代码:

<table id="sum_table">
    <tr>
        <td><input value="0" class="sum1" /></td>
        <td><input value="0" class="sum2"/></td>
        <td><input value="0" class="sum3"/></td>
        <td class="total">0</td>
    </tr>
    <tr>
        <td><input value="0" class="sum1"/></td>
        <td><input value="0" class="sum2"/></td>
        <td><input value="0" class="sum3"/></td>
        <td class="total">0</td>
    </tr>
    <tr>
        <td><input value="0" class="sum1"/></td>
        <td><input value="0" class="sum2"/></td>
        <td><input value="0" class="sum3"/></td>
        <td class="total">0</td>
    </tr>

    <tr class ="totalCol">
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>

</table>
<button id="tabla">+</button>
<button id="moes">Hide/Show</button>


<script>

  $(document).on('change',function(){

     var columnValues={}, rowValues={};

     $("#sum_table tr").each(function(rowIndex){
          $("td input", $(this)).each(function(colIndex){
            var value=$(this).val();
            // indexes need +1 to get the row number, because 
            // the indexes are 0-based.
            if (undefined===columnValues[colIndex+1]){
              columnValues[colIndex+1]=[];
            }
            if (undefined===rowValues[rowIndex+1]){
              rowValues[rowIndex+1]=[];
            }
            rowValues[rowIndex+1].push(value);
            columnValues[colIndex+1].push(value);

          });

      });
            // send data to server
       $.ajax({
           url: 'suma.php',
           type: 'post',
           data: {rows:rowValues, columns:columnValues},
           dataType: 'json',
           success: function(data){
               // insert your server-calculated data to dom   

           }
       }); 
});

PHP代码:

foreach ($_POST['rows'] as $rowNumber => $values){
    // $values is an array with all the values in the row
    echo "Hola";
}
foreach ($_POST['columns'] as $columnNumber => $values){
    // $values is an array with all the values in the column
}

先谢谢你们!

1 个答案:

答案 0 :(得分:1)

PHP 代码:

$result = array(
    'rows' => array(), 
    'columns' => array()
);

foreach ($_POST['rows'] as $rowNumber => $values){
    // $values is an array with all the values in the row
    $result['rows'][$rowNumber] = array_sum($values);
}
foreach ($_POST['columns'] as $columnNumber => $values){
    // $values is an array with all the values in the column
    $result['columns'][$columnNumber] = array_sum($values);
}

// output the result as json
echo json_encode($result);

Javascript success回调:

function(data){
    var rows = data.rows,
        columns = data.columns;

    // insert your server-calculated data to dom   
    $("td.total").each(function(rowIndex){
        $(this).text(rows[rowIndex+1]);
    });

    $("tr.totalCol td").each(function(columnIndex){
        $(this).text(columns[columnIndex+1]);
    });
}