由于 jQuery 代码导致网页崩溃

Posted 2023-03-06

技术标签:

【中文标题】由于 jQuery 代码导致网页崩溃【英文标题】：Webpage crashing due to jQuery code 【发布时间】：2016-03-28 04:53:32 【问题描述】：

这个文件被命名为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，这是假设获取两个文本框的值并进行计算。但点击提交后，代码似乎无限循环运行并崩溃。

【问题讨论】：

您调用了第一个 firstval 和第二个 second。 first 发送到 php 脚本时不存在 chat.***.com/rooms/97149/… $.post("index.php",first:first,second:second, operator:operator 这一行，把所有的内容输出了两次，有什么办法可以解决跨度> $.php 不是一个函数，您是否检查过您的 javascript 控制台是否存在此类错误？ - 它不是 jQuery 中的函数。您想将数据附加到 html，但您通过将 $('#results').php(data) 替换为 $('#results').html(data) 来做到这一点您将 (-, *, /) 传递给您的数据。您是否检查过它们是否正确输出？也许您可以更好地使用这些选项的值。你能发布你的'index.php'吗？我认为您正在使用“添加”，“减法”......在那里。 【参考方案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>

【讨论】：

【参考方案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 代码导致网页崩溃的主要内容，如果未能解决你的问题，请参考以下文章

由于暂停动画和 NSInternalInconsistencyException 导致应用程序崩溃

由于对调度组的不平衡调用导致不明显的崩溃

Python如何修复由于睡眠功能而导致的Tkinter窗口崩溃

为啥我的网页上jQuery没反应

由于使用 GPS 获取当前位置较晚导致应用程序崩溃

嵌套循环导致Excel崩溃