AJAX重新提交整個頁面沒有結果

讓我首先說我是使用AJAX的全新功能，剛剛開始。AJAX重新提交整個頁面沒有結果

這裏是我的代碼：

<?php 

    if (isset($_POST['number1'],$_POST['operation'],$_POST['number2'])) { 
     $number1 = trim(strip_tags($_POST['number1'])); 
     $number2 = trim(strip_tags($_POST['number2'])); 
     $operation = $_POST['operation']; 

     if ($operation == "plus") { 
      $answer = $number1 + $number2; 
      $operation = "+"; 
     } 

     if ($operation == "minus") { 
      $answer = $number1 - $number2; 
      $operation = "&#8211;"; 
     } 

     if ($operation == "multiply") { 
      $answer = $number1 * $number2; 
      $operation = "&#215;"; 
     } 

     if ($operation == "divide") { 
      $answer = $number1/$number2; 
      $operation = "&#247;"; 

     } 

     $output = '<br /><center><div id="success"><span style="color: orange; font-size: 20px;">'.number_format($number1).'</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue; font-size: 24px; font-weight:bold;">'.$operation.'</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: orange; font-size: 20px;">'.number_format($number2).'</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue; font-size: 24px; font-weight:bold;">=</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: purple; font-size: 20px;">'.number_format($answer).'</span></div> 
     '; 

     echo $output; 

     die(); 
    } 

?> 


    <form method="POST" id='calculatorForm'> 
     <input type="number" name="number1" id="url" placeholder="Enter your first number" autofocus required /> 

     <br /> 

     <select name="operation" id="url" style="width:100%;"> 
      <option value="operation">Select A Operation:</option> 
      <option value="plus">Plus</option> 
      <option value="minus">Minus</option> 
      <option value="multiply">Multiply</option> 
      <option value="divide">Divide</option> 
     </select> 

     <br /> 

     <input type="number" name="number2" id="url" placeholder="Enter your second number" required /> 

     <input type="submit" class="enter" id="submit" name="submit" value="Calculate!"> 

     <br /> 

     <span style="font-size:40px;color: purple;font-wight: bold;">Result: <span id='result'>0</span></span> 
    </form> 

    <script> 
     $('#calculatorForm').submit(function(){ 
      var num1 = $('input[name="number1"]').val(); 
      var oper = $('select[name="operation"]').val(); 
      var num2 = $('input[name="number2"]').val(); 
      $.ajax({ 
       type: "post", 
       data: {number1: num1, operation: oper, number2: num2}, 
       success: function(data){ 
        $('#result').html(data); 
       } 
      }); 
      return false; 
     }); 
    </script>

當我嘗試我有一個表單頁面上運行的代碼提交，再次給了我整個頁面在我的形式，並沒有計算我輸入的內容。

來源

2013-02-25 Jake Smith

您錯過了Ajax中的URL。 – 2013-02-25 17:38:16

這就是別人告訴我的，但當我在不同的頁面上運行它時，它可以與它一起工作嗎？ – 2013-02-25 17:40:43

的Ajax功能HOULD像

var data= $('#calculatorForm').serialize();  
    $.ajax({ 
     url:"Page.php", 
     type: "post", 
     data: data, 
     success: function(data){ 
      $('#result').html(data); 
     } 
    });`

你已經錯過了URL

來源

2013-02-25 17:41:46

是的，謝謝。這使我走上了正確的軌道:) – 2013-02-25 17:45:31

最好使用.serialize（）作爲表單數據，並始終將HTML（客戶端）和服務器端語言分開。 – 2013-02-25 18:05:38

發生這種情況，因爲你正在使用AJAX來再次抓取整個頁面（提供了Ajax請求沒有URL）。

一個解決方案可能是將PHP分隔成一個單獨的文件。然後使用Ajax請求搶...

的JavaScript：

$.ajax({ 
    url: 'calc.php', 
    type: 'post', 
    data: {number1: num1, operation oper, number2: num2}, 
    success: function(data) { 
     $('#result').html(data); 
    } 
});

它是在頁面上只保留形式。

使用PHP代碼創建一個名爲calc.php（或其他）的單獨PHP頁面

來源

2013-02-25 17:49:46

AJAX重新提交整個頁面沒有結果

回答

相關問題