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

Question

Web开发人员的新手，请多多包涵。在wordpress中，我有一个functions.php文件，其中包含一个函数，该函数生成图表并以2个日期作为输入。

在我的page-template.php中，我将输入2个日期，然后单击“生成”以重新生成图表而无需重新加载页面。我有一个不带参数的函数，该函数在页面加载时运行，该按钮将加载另一个函数，该函数在单击按钮时需要两个日期。

Ajax似乎是答案，但是大多数教程使我感到困惑，因为它们的示例要求连接到DB或仅专注于DB。不会通过wordpress函数调用已经执行过的函数吗？有没有一种简单的方法可以在传递两个表单值date1，date2时按原样调用我的函数？截断的代码希望可读。

感谢帮助。

page-template.php：第一个功能是默认范围内加载的功能（来自functions.php文件），然后是日期选择器和按钮。

<?php

lineChartAll_Generate();

echo "<form>

    Select Date Range:

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

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

    </form>";

?>

functions.php：使用WP数据库函数将select运行到一个变量中，然后运行生成我的图表外观的javascript代码。

<?php

add_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的代码版本：形式：<?phplineChartAll_Generate();echo "<form id="my-form">&nbsp; &nbsp; Select Date Range:&nbsp; &nbsp; <input type='date' name='date1'>&nbsp; &nbsp; <input type='date' name='date2'>&nbsp; &nbsp; <button id='submit'> submit </button>&nbsp; &nbsp; </form>";?>JavaScript / jQuery：单击提交按钮，jQuery会将表单数据收集到一个数组中并将其存储在formData变量中，然后使用的名称将其提交给PHP并使用的名称dataForPHP触发ajax操作钩子your_custom_actionjQuery('#submit').on('click', function() {&nbsp; &nbsp;let formData = jQuery('#my-form').serializeArray(); // retrieves the form's data as an array&nbsp; jQuery.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: ajaxurl, // default ajax url of wordpress&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; action: 'your_custom_action', // use this action to handle the event&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataForPHP: formData // this is your form's data that is going to be submitted to PHP by the name of dataForPHP&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function( response ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // do what you want with the response echoed from PHP&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function( error ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // show an oops! message&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});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() {&nbsp; if ( isset( $_POST['dataForPHP'] ) ) {&nbsp; &nbsp; &nbsp;// do staffs with submitted data from the html form...&nbsp; }&nbsp; 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.}