如何刷新同一页面中的特定DIV答案

【问题标题】：how to refresh a specific DIV in the same page如何刷新同一页面中的特定DIV
【发布时间】：2018-06-08 07:27:10
【问题描述】：

我目前正在做这个项目，需要用户输入财务价值来计算总数，我已经能够制作一个html表格，然后用php程序计算并输出总数。

现在我想知道的是，我怎样才能使具有 id-total 的 div 在每次单击该功能的刷新按钮时刷新，而不刷新整个页面，这样如果用户更改了数字，总数始终显示正确的值。也就是说，我希望 div --> total 在单击时更新，而其他输入的详细信息保持不变

这是我的代码：

<form method="post" action="calc.php" autocomplete="on">

  Data : <input type="date" name="data" data-date-inline-picker="false" data-date-open-on-focus="true" placeholder="la tua risposta" /><br />
  Ricevuta(€) : <input type="number" name="ricevuta" placeholder="la tua risposta" step="any" /><br />
  * : <input type="number" name="a" placeholder="la tua risposta" step="any" /><br />
  BM(€) : <input type=number name="bm"  placeholder="la tua risposta" step="any" /><br />
  Ass/Bon(€) : <input type="number" name="ass_bon" placeholder="la tua risposta" step="any" /><br />
  Cont(€) : <input type="number" name="cont" placeholder="la tua risposta" step="any" /><br />

<div id="total">
  Total(€) :
  <?php
  $data = $_POST["data"];
  $ricevuta = $_POST["ricevuta"];
  $a = $_POST["a"];
  $bm = $_POST["bm"];
  $ass_bon =  $_POST["ass_bon"];
  $cont = $_POST["cont"];
  $total=$_POST["total"];
  $total = $_POST["bm"] + $_POST["ass_bon"] + $_POST["cont"];
  echo $total;
  ?>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#total").load("calc.php");
    });
});
</script>
<button>refresh</button>
<br>

  Note : <textarea  name="note" placeholder=" "></textarea><br />

  <input type="submit" value="Invia" />
  </form>

【问题讨论】：

我建议使用 JavaScript 进行计算。没有必要使用 php。不过在开始之前先看看一些 JS 教程。
你好Phil，谢谢，但是使用的计算方法没有问题，如何让元素刷新，这基本上是因为这里输入的每个数据都会发送到一个mysql数据库
您可以使用 java 脚本来计算您的值，并可以更新元素的文本，例如 $("#total").text(totalVal) 其中totalVal 是您计算结果的变量。

标签： php jquery html

【解决方案1】：

在jsFiddle上尝试JS计算

<html>
<head></head>
<body>
    <form autocomplete="on">
      Data : <input type="date" name="data" data-date-inline-picker="false" data-date-open-on-focus="true" placeholder="la tua risposta"><br />
      Ricevuta(€) : <input type="number" name="ricevuta" placeholder="la tua risposta" step="any"><br />
      * : <input type="number" name="a" placeholder="la tua risposta" step="any"><br />
      BM(€) : <input type="number" id="bm" name="bm"  placeholder="la tua risposta" step="any"><br />
      Ass/Bon(€) : <input type="number" id="ass_bon" name="ass_bon" placeholder="la tua risposta" step="any"><br />
      Cont(€) : <input type="number" id="cont" name="cont" placeholder="la tua risposta" step="any"><br />

        <button id="calc" type="button">Calculate</button>
    </form>
    <p id="total"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#calc").on('click', function(){
            var bm = Number($('#bm').val());
            var ass_bon = Number($('#ass_bon').val());
            var cont = Number($('#cont').val());

            var total = bm + ass_bon + cont;

            $('#total').text(total);
        });
    });
    </script>
</body>
</html>

【讨论】：

你可以在jsFiddle中尝试一下，希望对你有帮助
计算按钮没有任何作用，页面保持不变
如果您在我的评论中单击“jsFiddle”，您会看到右上角的表单。在 BM(€)、Ass/Bon(€)、Cont(€) 中插入数据并点击计算。
程序运行良好，但我担心这样的话，这个字段可能无法通过正常的mysql绑定参数提交到mysql数据库
那就看看“PHP HTML教程”