Question

此文件名为index.php，这是为了获取两个文本框的值并进行计算。但是在点击提交后，代码似乎在无限循环上运行并崩溃。

<!DOCTYPE html>
<html>
<head>
<title>Form Calculator</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

function SubmitFormData(){
var first = $("#first").val();
var second = $("#second").val();
$.post("index.php",{first:first,second:second,},
function(data){
$('#results').html(data);
$('#formcal')[0].reset();
});
}

</script>

</head>
<body>
<ul>
  <li><a href="index.php">Calculator</a></li>
  <li><a href="bmi.php">Body Mass Index Calculator</a></li>
</ul>

<h1>Simple Calculator</h1>
<form action="" id="formcal" method="post">

<input type="number" id="first" name="first" placeholder="number"/>
<select name="operator" id="operator">
<option value="add">+</option>
<option value = "subtract">-</option>
<option value = "multiply">*</option>
<option value = "division">/</option>


</select>

<input type="number" id="second" name="second" placeholder="number 2"/>

<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Calculate"/>
</form>




<br>
<?php 
  echo $_POST['first'];
  echo $_POST['second'];

if(!empty($_POST['first']) && !empty($_POST['second'])){
    $number = $_POST['first'];
    $number2 = $_POST['second'];
    $operator = (isset($_GET['operator']) ? $_GET['operator'] : null);



      ini_set('display_errors', 'On');
      error_reporting(E_ALL | E_STRICT);

    echo "Answer:  ";
    //if($_POST['operator'] == 'add'){
    if($operator == 'add'){
      $complete = $number + $number2;

      echo "$number + $number2 = $complete";
    }
    //if($_POST['operator'] == 'subtract'){
    if($operator == 'subtract'){
      $complete = $number - $number2;
      echo "$number - $number2 = $complete";
    }
    //if($_POST['operator'] == 'multiply'){
    if($operator == 'multiply'){
      $complete = $number * $number2;
      echo "$number X  $number2 = $complete";
    }
    //if($_POST['operator'] == 'division'){
    if($operator == 'division'){
      $complete = $number / $number2;
      echo "$number / $number2 = $complete";
    }
  } 
  ?>


<div id="results">

 </div>


</body>
</html>

此文件名为index.php，这是为了获取两个文本框的值并进行计算。但是在点击提交后，代码似乎在无限循环上运行并崩溃。

Answer 1

尝试运行此代码：

<!DOCTYPE html>
<html>
<head>
<title>Form Calculator</title>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>

function SubmitFormData(){

    var first = $("#first").val();
    var second = $("#second").val();
    var operator = $("#operator").val();
    $.post("",{ first:first, second:second, operator:operator},

    function(data){
        $('#results').html(data);
        $('#formcal')[0].reset();
    });
}

</script>

</head>
<body>
<!--
<ul>
  <li><a href="index.php">Calculator</a></li>
  <li><a href="bmi.php">Body Mass Index Calculator</a></li>
</ul>
-->

<h1>Simple Calculator</h1>
<form action="" id="formcal" method="post">

    <input type="number" id="first" name="first" placeholder="number"/>
    <select name="operator" id="operator">
        <option value="add">+</option>
        <option value = "subtract">-</option>
        <option value = "multiply">*</option>
        <option value = "division">/</option>


    </select>

    <input type="number" id="second" name="second" placeholder="number 2"/>

    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Calculate"/>
</form>




<br>
<?php 
  echo $_POST['first']."<br/>";
  echo $_POST['second']."<br/>";
  echo $_POST['operator']."<br/>";

if(!empty($_POST['first']) && !empty($_POST['second'])){
    $number = $_POST['first'];
    $number2 = $_POST['second'];
    $operator = $_POST['operator'];



      ini_set('display_errors', 'On');
      error_reporting(E_ALL | E_STRICT);

    echo "Answer:  ";
    //if($_POST['operator'] == 'add'){
    if($operator == 'add'){
      $complete = $number + $number2;

      echo "$number + $number2 = $complete";
    }
    //if($_POST['operator'] == 'subtract'){
    if($operator == 'subtract'){
      $complete = $number - $number2;
      echo "$number - $number2 = $complete";
    }
    //if($_POST['operator'] == 'multiply'){
    if($operator == 'multiply'){
      $complete = $number * $number2;
      echo "$number X  $number2 = $complete";
    }
    //if($_POST['operator'] == 'division'){
    if($operator == 'division'){
      $complete = $number / $number2;
      echo "$number / $number2 = $complete";
    }
  } 
  ?>


<div id="results">

 </div>


</body>
</html>

Answer 2

在JavaScript中尝试以下更改：

function SubmitFormData(){
   var first = $("#first").val();
   var second = $("#second").val();
   var operator = $("#operator").val(); /* you have forgot to post this (operator) value */
   $.post("calculate.php",
       {
        first:first,
        second:second,
        operator: operator
       },
   function(data){
     $('#results').html(data);
     $('#formcal')[0].reset();
   });
}

不要发布到同一页面！而是创建一个新文件（例如calculate.php）并将您的php脚本移动到它：

<?php 
// calculate.php

if(isset($_POST['first']) && isset($_POST['second'])){
$number = $_POST['first'];
$number2 = $_POST['second'];
$operator = (isset($_POST['operator']) ? $_POST['operator'] : null);



  ini_set('display_errors', 'On');
  error_reporting(E_ALL | E_STRICT);

echo "Answer:  ";
//if($_POST['operator'] == 'add'){
if($operator == 'add'){
  $complete = $number + $number2;

  echo "$number + $number2 = $complete";
}
//if($_POST['operator'] == 'subtract'){
if($operator == 'subtract'){
  $complete = $number - $number2;
  echo "$number - $number2 = $complete";
}
//if($_POST['operator'] == 'multiply'){
if($operator == 'multiply'){
  $complete = $number * $number2;
  echo "$number X  $number2 = $complete";
}
//if($_POST['operator'] == 'division'){
if($operator == 'division'){
  $complete = $number / $number2;
  echo "$number / $number2 = $complete";
}
} 
?>

您正在从服务器请求原始AJAX请求中的index.php。由于页面index.php包含其他内容（HTML），因此帖子请求将使用它返回所有内容，而不是单个值（当您的原因是您将整个页面附加到现有页面的原因）执行计算）。

请参阅this SO问题以了解更多信息。

注意： 使用empty()交换isset()方法。始终使用isset()来确定变量是否存在/是否已设置。

另请注意，即使operator的值在POST请求中发送，您也应该能够在$_POST数组中访问它。

由于jQuery代码而导致网页崩溃

2 个答案: