Magento 2-使用AJAX将表单数据发送到控制器，并将结果返回到PHTML_Ajax_Module_Controller_Magento2

Magento 2-使用AJAX将表单数据发送到控制器，并将结果返回到PHTML

ajax module magento2

Magento 2-使用AJAX将表单数据发送到控制器，并将结果返回到PHTML,ajax,module,controller,magento2,Ajax,Module,Controller,Magento2,我正在开发一个简单的自定义模块，用户可以在其中输入身高，体重/体重指数将显示为表单提交的输出。用户输入的页面是计算页面，而输出显示在结果页面。单击提交按钮，用户将被重定向到不同的控制器/操作。下面是代码计算布局-供应商/模块/视图/前端/布局/计算索引.xml <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="u

我正在开发一个简单的自定义模块，用户可以在其中输入身高，体重/体重指数将显示为表单提交的输出。用户输入的页面是

计算

页面，而输出显示在

结果

页面。单击提交按钮，用户将被重定向到不同的控制器/操作。下面是代码

计算布局-供应商/模块/视图/前端/布局/计算索引.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <title>Calculator</title>
    </head> 

    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Index" name="calculation_index" template="Vendor_Module::calculation.phtml" />
        </referenceContainer>
    </body>
</page>

<div class="row clearfix">
        <div class="col-md-12 column">
            <form name="height" method="POST" id="height">
                  <div class="well">
                    <strong><?php echo __('Enter Height:')?></strong>
                    <input type="text" id="calculateTotalInput" name="calculateTotalInput" class="form-control input-md">
                    <input type="submit" id="calculateTotalSubmit"  name="calculate-total-submit" value="Calculate Total">
                </div>

                <div class="col-sm-6 col-xs-12" style="margin-bottom: 30px;">
                    <?php echo __('Height:')?> <input type="text" value="<?= $weight ?>" name="height" class="form-control input-md" readonly="">
                    <?php echo __('BMI:')?> <input type="text" value="<?= $bmi ?>" name="weight" class="form-control input-md" readonly="">
                </div> 

            </form>
        </div>
    </div>


<script>
$(document).ready(function() {
    $("#height").submit(function(){
        jQuery.ajax({
        url: "/vendor/module/result/result",
        type: "POST",
        data: {height:height,weight:weight},
        success: function(response){
            console.log(response);
        }
    });
    });
});
</script>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <title>Result</title>
    </head> 

    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Index" name="calculation_index" template="Vendor_Module::result.phtml" />
        </referenceContainer>
    </body>
</page>

<?php 

    echo $block->getAjaxData();

?>


计算器

计算输入PHTML-供应商/模块/视图/前端/模板/计算。PHTML

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <title>Calculator</title>
    </head> 

    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Index" name="calculation_index" template="Vendor_Module::calculation.phtml" />
        </referenceContainer>
    </body>
</page>

<div class="row clearfix">
        <div class="col-md-12 column">
            <form name="height" method="POST" id="height">
                  <div class="well">
                    <strong><?php echo __('Enter Height:')?></strong>
                    <input type="text" id="calculateTotalInput" name="calculateTotalInput" class="form-control input-md">
                    <input type="submit" id="calculateTotalSubmit"  name="calculate-total-submit" value="Calculate Total">
                </div>

                <div class="col-sm-6 col-xs-12" style="margin-bottom: 30px;">
                    <?php echo __('Height:')?> <input type="text" value="<?= $weight ?>" name="height" class="form-control input-md" readonly="">
                    <?php echo __('BMI:')?> <input type="text" value="<?= $bmi ?>" name="weight" class="form-control input-md" readonly="">
                </div> 

            </form>
        </div>
    </div>


<script>
$(document).ready(function() {
    $("#height").submit(function(){
        jQuery.ajax({
        url: "/vendor/module/result/result",
        type: "POST",
        data: {height:height,weight:weight},
        success: function(response){
            console.log(response);
        }
    });
    });
});
</script>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <title>Result</title>
    </head> 

    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Index" name="calculation_index" template="Vendor_Module::result.phtml" />
        </referenceContainer>
    </body>
</page>

<?php 

    echo $block->getAjaxData();

?>

工作流-用户进入calculation.phtml页面>输入> 在“提交>处理结果中的数据”按钮上通过ajax调用结果ctrl ctrl>使用页面重新加载在更新的result.html中显示数据

在尝试使用AJAX调用控制器操作时，它不起作用。如何通过AJAX调用数据并将数据传递给控制器
如何以JSON格式从控制器返回数据并将其发送回要显示输出，请单击result.phtml文件