jQuery & PHP：计算总和并将其发送回客户端

Posted 2023-02-24

【中文标题】jQuery & PHP：计算总和并将其发送回客户端

【英文标题】：jQuery & PHP: Calculate the sum and send it back to client

【发布时间】：2016-03-12 05:55:59

【问题描述】：

我有以下带有输入元素的 html 表单：

<form id="forma" name="forma" method="post">
   <div id="oblock">
      <div class="dtable">
        <div class="drow" id="drow1">
            <div class="dcell">
                <label for="aster">Aster:</label>
                <input type="text" id="aster" name="aster" value="0" stock="10" price="2.99" required>
            </div>
            <div class="dcell">
                <label for="daffodil">Daffodil:</label>
                <input type="text" id="daffodil" name="daffodil" value="0" stock="12" price="1.99" required >
            </div>
            <div class="dcell">
                <label for="rose">Rose:</label>
                <input type="text" id="rose" name="rose" value="0" stock="2" price="4.99" required>
            </div>
        </div>
    </div>
  </div>
  <div id="buttonDiv">
     <button type="submit">Place Order</button>
  </div>
</form>

我使用 jQuery serialize() 从表单收集数据并使用 $.post 发送到服务器端（在我的例子中为 test.php）：

   $(function() 
        $("button").click(function(e) 
            var formData = $("form").serialize();
            $.post("test.php", formData, processServerResponse);
            e.preventDefault();
        );
    );
    function processServerResponse(data) 
         $("div.dcell").hide();
         $("#buttonDiv").append('<div>'+data.total+'</div>');
         $("#buttonDiv button").remove();
    

如果我理解正确 - var formData = $("form").serialize(); 发送到服务器的数据将是一个字符串，如下所示：

"aster":"2"&"daffodil":"5"&"rose":"0"

1.如何在PHP中访问这些值？

2.如果有大量输入元素，每个元素都有自己唯一的名称，我们如何迭代（并避免对每个元素单独使用 $_POST['input_name'] -> $_POST['aster'], $_POST['rose'] 等等...）并计算 PHP 中的总和？

3.如何将计算的总和发送回客户端（from PHP 到 jQuery/客户端）？

EDIT2：

根据我在这里收到的一些答案，我尝试了以下方式：

<?php
    $sum = 0;
    foreach ($_POST as $name=>$value) 
        $sum += (int)$value;
    
    $_POST['total'] = $sum;
    echo json_encode($_POST['total']);

我的客户端代码（jQuery）：

function processServerResponse(data) 
        $("div.dcell").hide();
        $("#buttonDiv").append('<div>'+data+'</div>');
        $("#buttonDiv button").remove();
 

它有效 - 它显示总和......

【问题讨论】：

1.您可以使用超全局变量访问它们，使用元素名称作为键，如 $_POST['aster']

关于您添加/更新的问题：将 value.total 更改为 data.total

已更改，我将显示 undefined 而不是 sum？

你能显示从你的 php 脚本返回的内容吗？请记住，当您使用 serialize() 时，只有输入元素值随请求一起发送。不是您添加的属性股票或价格

好的，我在您的 html 代码中看不到任何名称为 uneteVrednosti bur 的元素，您使用 isset($_POST['uneteVrednosti']) 在 php 代码中检查它。尝试将具有该名称的隐藏元素添加到您的表单中

【参考方案1】：

1 使用 $_POST['variable-name'];

$asterPostVariable = $_POST['aster'];

2 遍历 $_POST 数组

foreach ( $_POST as $key => $val )

  // Do calculation, your value from input element is in $val
  $sum += $val;
  // You could also check your $key if you don't want to sum all post variables

3 将其作为 json 数据回显

echo json_encode( ['sum' => $calculatedSum] );

编辑

2 遍历 $_POST 数组

foreach ( $_POST as $key => $val )

  // You could also check your $key if you don't want to sum all post variables. This solution is based on that your form elements that you want to calculate are named with the initial fl_
  if ( substr($key, 0, 3) == 'fl_' )
    $sum += $val;

【讨论】：

如果这个表单有更多的变量（与鲜花无关）发送到服务器端，但我们不想用它们来计算总和怎么办？

也许你可以用你想要总结的起始 fl_ 来命名所有输入元素。然后在您的 php 代码中检查元素名称的 $key 变量。 if (substr($key, 0, 3) == 'fl_')

【参考方案2】：

回答所有三个问题：

1. 要访问这些值，您将使用超全局变量。例如：

$_POST['element_name'];

2.要遍历所有元素，请使用foreach 语句。例如：

$sum = 0;
foreach($_POST as $name => $value)
    $sum += strtoint($value);

$final = array(
    sum => $sum
);

3. 要将值返回到 javascript，请使用 json_encode 和 echo。还要确保不要echo 任何您不想返回的数据。例如：

echo json_encode($final);

【讨论】：

如果这个表单有更多的变量（与鲜花无关）发送到服务器端，但我们不想用它们来计算总和怎么办？

【参考方案3】：

您可以将每个花变量作为数组的索引：

<form id="forma" name="forma" method="post">
   <div id="oblock">
      <div class="dtable">
        <div class="drow" id="drow1">
            <div class="dcell">
                <label for="flowers[aster]">Aster:</label>
                <input type="text" id="flowers[aster]" name="flowers[aster]" value="0" stock="10" price="2.99" required>
            </div>
            <div class="dcell">
                <label for="flowers[daffodil]">Daffodil:</label>
                <input type="text" id="flowers[daffodil]" name="flowers[daffodil]" value="0" stock="12" price="1.99" required >
            </div>
            <div class="dcell">
                <label for="flowers[rose]">Rose:</label>
                <input type="text" id="flowers[rose]" name="flowers[rose]" value="0" stock="2" price="4.99" required>
            </div>
        </div>
    </div>
  </div>
  <div id="buttonDiv">
     <button type="submit">Place Order</button>
  </div>
</form>

然后你可以遍历这个数组：

foreach($_POST['flowers'] as $flowerType => $count)
    // do something

我会尽量避免遍历$_POST 的整个数组，因为稍后您可能想在此表单中添加更多变量（与花无关）。

发回客户端时可以使用echo json_encode($result);

编辑：

如果您的帖子收到 undefined 回复，您应该检查您的 PHP 错误日志，因为您的脚本很可能在回显任何内容之前失败或退出。

【讨论】：

从 PHP 5.4 开始，您还可以使用短数组语法，将 array() 替换为 []。 Source

【参考方案4】：

您不必从 jquery 序列化方法中反序列化 PHP 中的任何内容。如果您对数据进行序列化，如果您使用的是 GET 方法 ajax 请求，则应将其作为查询参数发送到 PHP；如果您使用的是 POST ajax 请求，则应将其作为查询参数发送到 PHP。因此，在 PHP 中，您可以根据请求类型访问 $_POST["varname"] 或 $_GET["varname"] 等值。

serialize 方法只是获取表单元素并将它们放入字符串形式。 "varname=val&var2=val2"

迭代请求参数 $_REQUEST 或 $_POST。 将其转换为 json 并回显 ex。 echo json_encode($data);

【讨论】：

如果消失了怎么办？ ***.com/questions/1792603/… 在您的答案中发布一个示例。

你只要拿出解决方案并从中学习，你是否希望答案永远存在？

是的，SO 希望保留答案。

那是你的问题 :) 很高兴我能帮上忙

给你我的朋友 :)