如何使用Ajax通过按钮表单提交或onClick运行简单的PHP函数？

Question

Web开发人员的新手，请多多包涵。在wordpress中，我有一个functions.php文件，其中包含一个函数，该函数生成图表并以2个日期作为输入。在我的page-template.php中，我将输入2个日期，然后单击“生成”以重新生成图表而无需重新加载页面。我有一个不带参数的函数，该函数在页面加载时运行，该按钮将加载另一个函数，该函数在单击按钮时需要两个日期。Ajax似乎是答案，但是大多数教程使我感到困惑，因为它们的示例要求连接到DB或仅专注于DB。不会通过wordpress函数调用已经执行过的函数吗？有没有一种简单的方法可以在传递两个表单值date1，date2时按原样调用我的函数？截断的代码希望可读。感谢帮助。page-template.php：第一个功能是默认范围内加载的功能（来自functions.php文件），然后是日期选择器和按钮。<?phplineChartAll_Generate();echo "<form>    Select Date Range:    <input type='date' name='date1'>    <input type='date' name='date2'>    </form>";?>functions.php：使用WP数据库函数将select运行到一个变量中，然后运行生成我的图表外观的javascript代码。<?phpadd_action('wp_enqueue_scripts','enqueue_parent_styles');function enqueue_parent_styles(){    wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');}function lineChartCustom_Generate($date1,$date2){    //Database queries    global $wpdb;            $overallenergyResults = $wpdb->get_results    (    "SELECT QUERY GOES HERE"    );    // Line chart code    echo "    <div class='lineChartAll'>    <canvas id='myChart' width='400' height='200'></canvas>    <script>          //Chart javascript code goes here using $overallenergyResults variable    </script></div>";}?>

Answer 1

是的，Ajax是解决此问题的方法，这是使用Ajax的代码版本：

形式：

<?php

lineChartAll_Generate();

echo "<form id="my-form">

    Select Date Range:

    <input type='date' name='date1'>

    <input type='date' name='date2'>

    <button id='submit'> submit </button>

    </form>";

?>

JavaScript / jQuery：

单击提交按钮，jQuery会将表单数据收集到一个数组中并将其存储在formData变量中，然后使用的名称将其提交给PHP并使用的名称dataForPHP触发ajax操作钩子your_custom_action

jQuery('#submit').on('click', function() {

   let formData = jQuery('#my-form').serializeArray(); // retrieves the form's data as an array

  jQuery.ajax({

            url: ajaxurl, // default ajax url of wordpress

            type: 'POST',

            data: {

                action: 'your_custom_action', // use this action to handle the event

                dataForPHP: formData // this is your form's data that is going to be submitted to PHP by the name of dataForPHP

            },

            success: function( response ) {

                // do what you want with the response echoed from PHP

            },

            error: function( error ) {

              // show an oops! message

            }

        });

    });

});

PHP：

PHP使用jQuery触发的ajax操作来运行一个函数，因此，这add_action('wp_ajax_your_custom_action', 'your_custom_function');意味着当your_custom_action触发时，运行your_custom_function。

add_action('wp_ajax_your_custom_action', 'your_custom_function'); // ajax actions in wordpress must have the prefex 'wp_ajax_'

function your_custom_function() {

  if ( isset( $_POST['dataForPHP'] ) ) {

     // do staffs with submitted data from the html form...

  }

  echo 'what you want to receive as a response in jQuery.ajax() success function'; // ignore this line if you don't want to receive any response.

}