我该如何动态地获得这个现有的代码更新？

-1

我已经包含了用于计算我的公式的php文件。我需要能够显示没有页面重新加载的答案。我对Ajax的概念和JS中的新手都很陌生。任何帮助，将不胜感激！我该如何动态地获得这个现有的代码更新？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>ProNexis</title> 
<link rel="stylesheet" href="assets/demo.css"> 
<link rel="stylesheet" href="assets/form-basic.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">  </script> 
</head> 
<div class="main-content"> 
    <form id="myForm" name="myForm" class="form-basic" action="equate.php" method="POST"> 

     <div class="form-title-row"> 
      <h1>How much can ProNexis earn for you?</h1> 
     </div> 

     <div class="form-row"> 
      <label> 
       <span>Locations</span> 
       <input type="text" id="branches" name="branches" placeholder="#"> 
      </label> 
     </div> 

     <div class="form-row"> 
      <label> 
       <span>Close Rate</span> 
       <input type="text" id="closerate" name="closerate" placeholder="%"> 
      </label> 
     </div> 

     <div class="form-row"> 
      <label> 
       <span>Average ticket size</span> 
       <input type="text" id="ticketsize" name="ticketsize" placeholder="$"> 
      </label> 
     </div> 

     <div class="form-row"> 
      <button name="calculate" class="btn btn-primary">Calculate!</button> 
     </div> 

    </form>  
</div> 
</body> 
</html> 

<?php 


$branches = $_POST['branches']; 
$closerate = $_POST['closerate']; 
$ticketsize = $_POST['ticketsize']; 
$leadsperhour = 8; 

$revenue = ($branches * $leadsperhour) * $closerate * $ticketsize; 
$leadsmissed = $branches * $leadsperhour; 

$panswerrate = .92 * $leadsmissed; 

$pcloserate = $closerate * $leadsmissed; 
$prevenue = $pcloserate * $ticketsize; 


echo "Your company, on average, missed " . $leadsmissed . " leads in the past hour. "; 

echo "With Pronexis, you would have talked to " . $panswerrate . " of those leads, closed " . $pcloserate . " of them, and received $" . $prevenue . " more revenue!"; 


?> 
<!DOCTYPE html> 
<html lang="en"> 

<head> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>ProNexis</title> 
<link rel="stylesheet" href="assets/demo.css"> 
<link rel="stylesheet" href="assets/form-basic.css"> 

</head> 
<body> 
</body> 
</html>

来源

2016-02-14 Jeremiah Olsen

学习和使用** ** AJAX给 – Blip

尝试对我的回答 – Butterfly

谢谢所有的你的答案。工作很棒！ –

您的HTML脚本应该如下所示。不要忘记包括你的jQuery库。

calculate.html

<!DOCTYPE html> 
<html> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
<script src="js/jquery.js"></script> 
<script src="js/jquery.validate.js"></script> 
<title>Validation Test</title> 
<head> 
<script> 
    $(document).ready(function(){ 
     $(document).on('click', '.btn.btn-primary', function(e){ 
      e.preventDefault(); 
      var branches = $('#branches').val(); 
      var closerate = $('#closerate').val(); 
      var ticketsize = $('#ticketsize').val(); 
      $.ajax({ 
       url: 'calculate.php', 
       method : 'POST', 
       datatType: 'JSON', 
       data: { 
        branches : branches, 
        closerate : closerate, 
        ticketsize : ticketsize, 
       }, 
       success: function(result){ 
        obj = JSON.parse(result); 
        $('#result_1').text(obj.string1); 
        $('#result_2').text(obj.string2); 
       } 
      }); 
     }) 
    }) 
</script> 
</head> 
<body> 
<div class="main-content"> 
    <form id="myForm" name="myForm" class="form-basic" action="calculate.php" method="POST"> 
     <div class="form-title-row"> 
      <h1>How much can ProNexis earn for you?</h1> 
     </div> 

     <div class="form-row"> 
      <label> 
       <span>Locations</span> 
       <input type="text" id="branches" name="branches" placeholder="#"> 
      </label> 
     </div> 

     <div class="form-row"> 
      <label> 
       <span>Close Rate</span> 
       <input type="text" id="closerate" name="closerate" placeholder="%"> 
      </label> 
     </div> 

     <div class="form-row"> 
      <label> 
       <span>Average ticket size</span> 
       <input type="text" id="ticketsize" name="ticketsize" placeholder="$"> 
      </label> 
     </div> 

     <div class="form-row"> 
      <button name="calculate" class="btn btn-primary">Calculate!</button> 
     </div> 

    </form> 

    <div id="result"> 
     <p id="result_1"></p> 
     <p id="result_2"></p> 
    </div>  
</div> 
</body> 
</html>

你php脚本应该是像下面 Calculate.php：

<?php 
    $branches = $_POST['branches']; 
    $closerate = $_POST['closerate']; 
    $ticketsize = $_POST['ticketsize']; 
    $leadsperhour = 8; 


    $revenue = ($branches * $leadsperhour) * $closerate * $ticketsize; 
    $leadsmissed = $branches * $leadsperhour; 

    $panswerrate = .92 * $leadsmissed; 

    $pcloserate = $closerate * $leadsmissed; 
    $prevenue = $pcloserate * $ticketsize; 


    $result['string1'] = "Your company, on average, missed " . $leadsmissed . " leads in the past hour. "; 

    $result['string2'] = "With Pronexis, you would have talked to " . $panswerrate . " of those leads, closed " . $pcloserate . " of them, and received $" . $prevenue . " more revenue!"; 




    echo json_encode($result); 
?>

来源

2016-02-14 05:59:45 Butterfly

谢谢！它效果很好！它帮助了解整个过程以及它的工作方式。再次感谢！ –

对不起，我想我按了两次。再次感谢。 –

创建一个div来显示结果

<div id="result"> 

</div>

，并在底部体前补充一点：

 <script> 
    $("#myForm").submit(function(event) { 

     /* Stop form from submitting normally */ 
     event.preventDefault(); 

     /* Clear result div*/ 
     $("#result").html(''); 

     /* Get some values from elements on the page: */ 
     var values = $(this).serialize(); 

     /* Send the data using post and put the results in a div */ 
     $.ajax({ 
      url: "script.php", 
      type: "POST", 
      data: values, 
      success: function(data){ 
       $("#result_div").fadeIn(1000).html('Your company, on average, missed ' + data.leadsmissed + ' leads in the past hour. <br> With Pronexis, you would have talked to ' . data.panswerrate . ' of those leads, closed ' . data.pcloserate . ' of them, and received $' . data.prevenue . ' more revenue!'); 
      }, 
      error:function(data){ 
       $("#result_div").fadeIn(1000).html('Error'); 
      } 
     }); 
    }); 
</script>

而且你的PHP（script.php的）

<?php 


$branches = $_POST['branches']; 
$closerate = $_POST['closerate']; 
$ticketsize = $_POST['ticketsize']; 
$leadsperhour = 8; 

$data['revenue'] = ($branches * $leadsperhour) * $closerate * $ticketsize; 
$data['leadsmissed'] = $branches * $leadsperhour; 

$data['panswerrate']= .92 * $data['leadsmissed']; 

$data['pcloserate'] = $closerate * $data['leadsmissed']; 
$data['prevenue'] = $data['pcloserate'] * $ticketsize; 


//Return the data back 
echo json_encode($data); 


?>

我没有测试，但它应该工作。

来源

2016-02-14 05:57:58

谢谢！这个也工作得很好！我很欣赏故障。我知道这可能看起来像一个简单的问题，但对我来说很困难。再次感谢！ –

太棒了！将答案标记为已通过，如果它适合你:) –

我该如何动态地获得这个现有的代码更新？

回答

相关问题