Question

我对Ajax很新。我在Ajax函数中从PHP url获取了正确的值。问题是我的数据参数导致它重复值。

以下是实际网页上显示的内容：

这是console.log输出：

[2000, 335.1032163829112]
[2000, 335.1032163829112]
[2000, 335.1032163829112]
[2000, 335.1032163829112]
[2000, 335.1032163829112]

表单有5个输入字段，所以我假设因为Ajax函数显示$('form').serialize()，所以它会返回所请求的值，因为有多个输入字段。

发送我需要的正确数据参数是什么？我只需要在我的PHP脚本中计算的2个值。

这是初始表单，然后是隐藏的div和Ajax调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Volume Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container page-heading">
    <h2>Volume Calculator</h2>
</div>
<!--<form class="form-horizontal" method="post" action="result.php">-->
<form id="form" class="form-horizontal" method="post" action="">
    <div class="form-container">
        <p class="calculate-heading">Calculate Volume of a Rectangle</p>
    </div>
    <div class="container form-container">
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="width" class="col-sm-3 col-form-label">Width: </label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control pull-left" id="width" name="width" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="length" class="col-sm-3 col-form-label">Length: </label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control pull-left" id="length" name="length" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="height" class="col-sm-3 col-form-label">Height: </label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control pull-left" id="height" name="height" required>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 bs-linebreak">
            <!-- NOTHING. JUST A LINE BREAK -->
        </div>
    </div>
    <div class="form-container">
        <p class="calculate-heading">Calculate Volume of a Cone</p>
    </div>
    <div class="container form-container">
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="radius" class="col-sm-3 col-form-label">Radius: </label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control pull-left" id="radius" name="radius" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="cone_height" class="col-sm-3 col-form-label">Height: </label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control pull-left" id="cone_height" name="cone_height"
                               required>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container form-container">
        <div class="row">
            <!--<button type="submit" id="submit-btn" class="btn btn-primary">Calculate</button>-->
            <button type="button" id="submit-btn" class="btn btn-primary">Calculate</button>
        </div>
    </div>
</form>

出现的隐藏div和Ajax功能：

<!-- NEW DIV THAT APPEARS ON FORM SUBMIT. HIDDEN BY DEFAULT VIA JQUERY -->
<div id="result-form" class="form-horizontal">
    <div class="form-container">
        <p class="calculate-heading">Summary of Calculations</p>
    </div>
    <div class="row">
        <div class="col-md-12 bs-linebreak">
            <!-- NOTHING. JUST A LINE BREAK -->
        </div>
    </div>
    <div class="form-container">
        <p class="calculate-heading calculate-heading-bold">Volume of Rectangle</p>
        <p id="length-p" class="calculate-heading">Length: </p>
        <p id="width-p" class="calculate-heading">Width: </p>
        <p id="height-p" class="calculate-heading">Height: </p>
        <br>
        <p id=rec_volume-p" class="calculate-heading">The Volume of the Rectangle is <strong></strong></p>
    </div>
    <div class="form-container">
        <p class="calculate-heading calculate-heading-bold">Volume of a Cone</p>
        <p id="radius-p" class="calculate-heading">Radius: </p>
        <p id="cone_height-p" class="calculate-heading">Height: </p>
        <br>
        <p id="cone_volume-p" class="calculate-heading">The Volume of the Cone is <strong></strong></p>
    </div>
</div>
</body>
<script>
    //HIDE THE DIV WHEN DOCUMENT IS LOADED
    $(document).ready(function() {
        $('#result-form').hide();
    });
    //GET RID OF DEFAULT HTML INVALID WARNING
    $('input').on("invalid", function (e) {
        e.preventDefault();
    });
    //HANDLE BUTTON SUBMIT
    //LOOP THROUGH ALL INPUT ELEMENTS AND CHECK FOR INVALID FIELDS
    $('#submit-btn').click(function () {
        $('form input[type!=submit]').each(function () {
            if ($(this).val() == '') {
                alert("All fields are required");
                return false;
            }
            else {

                //AJAX CALL HERE
                $.ajax({
                    type:'post',
                    url:'calculate.php',
                    data: $('form').serialize(), //<-- THIS IS THE PROBLEM, BUT I DON'T KNOW WHAT TO DO
                    success: function(output) {
                        var result = $.parseJSON(output);
                        console.log(result);
                        $('#result-form').show();
                        $('#length-p').append($('#length').val());
                        //REST OF THE VALUES UNDER THIS
                    }
                });

            }
        });
    });
</script>

calculate.php脚本：

<?php
//Rectangle dims
$width = $_POST['width'];
$length = $_POST['length'];
$height = $_POST['height'];

//Cone dims
$radius = $_POST['radius'];
$cone_height = $_POST['cone_height'];

//Rectangle volume
$rec_volume = $width * $length * $height;
//Cone volume
$cone_volume = 1/3 * (M_PI * pow($radius, 2) * $cone_height);

echo json_encode(array($rec_volume, $cone_volume));

我真的想异步这样做，而不是去一个全新的页面。这似乎是多余的。什么是正确的数据参数？

感谢。

Answer 1

您的代码循环遍历表单中的每个变量并发出ajax调用。每个ajax调用返回并将结果追加到#length-p元素。

解决方法是在您确认所有元素都已填写完毕后，只调用一次ajax。这应该做到这一点。

$('#submit-btn').click(function () {
    // validate, failures issue alert and exist the call.
    $('form input[type!=submit]').each(function () {
        if ($(this).val() == '') {
            alert("All fields are required");
            return false;
        }
     });

     // no failure, so issue the request. 
     //AJAX CALL HERE
     $.ajax({
        type:'post',
        url:'calculate.php',
        data: $('form').serialize(), //<-- THIS IS THE PROBLEM, BUT I DON'T KNOW WHAT TO DO
        success: function(output) {
            var result = $.parseJSON(output);
            console.log(result);
            $('#result-form').show();
            $('#length-p').append($('#length').val());
            //REST OF THE VALUES UNDER THIS
        }
    });
});

由于Ajax数据参数不正确，文本会多次追加。什么是正确的参数？

1 个答案: