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重新提交整个页面没有结果

回答

相关问题