Question

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

Answer 1

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


?>

我还没有经过测试，但它确实有用。

Answer 2

您的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);
?>

如何动态更新现有代码？

2 个答案: