如何动态更新现有代码？答案

【问题标题】：How can I have this existing code update dynamically?如何动态更新现有代码？
【发布时间】：2016-02-14 05:11:04
【问题描述】：

我已经包含了我用来计算我的方程式的 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>

【问题讨论】：

学习和使用AJAX
试试我的答案
谢谢大家的回答。效果很好！

标签： ajax ajaxform

【解决方案1】：

您的HTML 脚本应如下所示。不要忘记包含您的 jquery 库。

计算.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 脚本应如下所示计算.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);
?>

【讨论】：

谢谢！效果很好！了解整个过程以及它是如何工作的对它很有帮助。再次感谢！
对不起，我想我按了两次。再次感谢。

【解决方案2】：

创建一个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);


?>

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

【讨论】：

谢谢！这个也有效！我很欣赏这种崩溃。我知道这似乎是一个简单的问题，但对我来说很难。再次感谢！
太棒了！！如果对您有用，请将答案标记为已接受:)