Web開發(fā)人員的新手，請(qǐng)多多包涵。在wordpress中，我有一個(gè)functions.php文件，其中包含一個(gè)函數(shù)，該函數(shù)生成圖表并以2個(gè)日期作為輸入。在我的page-template.php中，我將輸入2個(gè)日期，然后單擊“生成”以重新生成圖表而無需重新加載頁面。我有一個(gè)不帶參數(shù)的函數(shù)，該函數(shù)在頁面加載時(shí)運(yùn)行，該按鈕將加載另一個(gè)函數(shù)，該函數(shù)在單擊按鈕時(shí)需要兩個(gè)日期。Ajax似乎是答案，但是大多數(shù)教程使我感到困惑，因?yàn)樗鼈兊氖纠筮B接到DB或僅專注于DB。不會(huì)通過wordpress函數(shù)調(diào)用已經(jīng)執(zhí)行過的函數(shù)嗎？有沒有一種簡(jiǎn)單的方法可以在傳遞兩個(gè)表單值date1，date2時(shí)按原樣調(diào)用我的函數(shù)？截?cái)嗟拇a希望可讀。感謝幫助。page-template.php：第一個(gè)功能是默認(rèn)范圍內(nèi)加載的功能（來自functions.php文件），然后是日期選擇器和按鈕。<?phplineChartAll_Generate();echo "<form> Select Date Range: <input type='date' name='date1'> <input type='date' name='date2'> </form>";?>functions.php：使用WP數(shù)據(jù)庫函數(shù)將select運(yùn)行到一個(gè)變量中，然后運(yùn)行生成我的圖表外觀的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>";}?>
2 回答
喵喔喔
TA貢獻(xiàn)1735條經(jīng)驗(yàn) 獲得超5個(gè)贊
是的，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會(huì)將表單數(shù)據(jù)收集到一個(gè)數(shù)組中并將其存儲(chǔ)在formData變量中，然后使用的名稱將其提交給PHP并使用的名稱dataForPHP觸發(fā)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觸發(fā)的ajax操作來運(yùn)行一個(gè)函數(shù)，因此，這add_action('wp_ajax_your_custom_action', 'your_custom_function');意味著當(dāng)your_custom_action觸發(fā)時(shí)，運(yùn)行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.
}
- 2 回答
- 0 關(guān)注
- 306 瀏覽
添加回答
舉報(bào)
0/150
提交
取消