由於jQuery代碼造成的網頁崩潰

該文件被命名爲index.php，假設獲取兩個文本框的值並進行計算。但點擊提交後，代碼似乎運行在無限循環和崩潰。由於jQuery代碼造成的網頁崩潰

<!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，這是假設獲取兩個文本框的值並進行計算。但點擊提交後，代碼似乎運行在無限循環和崩潰。

來源

2015-12-22 Vijay Bhatt

你叫第一第一和第二秒。當您將它發送到php腳本時，首先不存在 –

http://chat.stackoverflow.com/rooms/97149/php-mysql-html-css-javascript-jquery –

$ .post（「index.php」， {第一：第一，第二：第二，操作員：操作員} 這一行，輸出所有內容兩次，是否有任何方法來修復它 –

嘗試運行這段代碼：

<!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>

來源

2015-12-22 05:18:50 learningbyexample

嘗試在你的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陣列中訪問它。

來源

2015-12-22 05:55:34

由於jQuery代碼造成的網頁崩潰

回答

相關問題