Ajax调用WordPress的自定义页面
问题描述:
我在我的WordPress的子主题中创建一个自定义页面。我已经将页面包含在子主题函数中。现在我想使用Ajax查看数据库表中的一些数据。但它显示的是相同的网页而不是实际的结果。帮帮我?Ajax调用WordPress的自定义页面
模板页面代码
<?php
wp_enqueue_script('daily_food_reports', get_stylesheet_directory_uri() . '/reports/js/daily_food_reports.js', array('jquery'), '1.0', true);
wp_localize_script('daily_food_reports', 'daily_food_reports_obj',array('ajaxUrl' => admin_url('admin-ajax.php'), 'we_value' => 1234));
?>
<div id="content" class="container">
<div class="row">
<div class="main col-md-12" role="main">
<div class="entry-content" itemprop="mainContentOfPage">
<?php get_template_part('templates/content', 'page'); ?>
<div class="col-md-6 col-sm-12 form-group">
<form method="post" action="" id="dailyfoodreports">
<label for=""><strong>Please Select Date</strong></label> <img id="loader" src="<?php echo get_stylesheet_directory_uri().'/images/loadingg.gif' ;?>"/>
<input type="text" class="form-control" id="searchoption" name="searchoption" value="" readonly="">
<input type="hidden" name="action" value="daily_food_reports"/>
</form>
</div>
<div class="col-md-12 col-sm-12 table-responsive" id="searchdata"></div>
</div>
<?php
function daily_food_reports(){
$searchvalue = $_POST['searchvalue'];
global $wpdb;
$results = $wpdb->get_results($wpdb->prepare("SELECT * FROM daily_food_reports where reports_date = %s ",$searchvalue),ARRAY_A);
if ($results) {
$total_position=0;
$totalp = 0;
$serial = 1;
echo "<h2 style='text-align:center;color:green'> Reports Date = " .$searchvalue . "</h2>";
echo "<table id='Tablestdresult' class='table table-bordered table-hover'>
<thead>
<tr>
<th>#</th>
<th> প্রকোষ্ট </th>
<th> সংখ্যা </th>
</tr>
</thead>
";
foreach ($results as $key => $value) {
$id = $value['id'];
$totalp+= $value['patient_number'];
echo"<tr>";
echo "<td>" . $serial++ . "</td>";
echo "<td class=''>" . $value['prakasta_no'] . "</td>";
echo "<td class=''>" . $value['patient_number'] . "</td>";
echo " <a data-toggle='tooltip' class='btn btn-danger deleteinformation' id='" . $id . "' title='Delete'> <i class='fa fa-trash'></i> </a></td>";
echo"</tr>";
}
echo"</tbody>";
echo"<tfoot>
<tr>
<td>#</td>
<td>মোট </td>
<td style='font-weight:bold;color:green;text-align:'> $totalp </td>
</tr>
<tr>
<th>#</th>
<th> প্রকোষ্ট </th>
<th> সংখ্যা </th>
</tr>
</tfoot>";
echo"</table>";
echo"<li class='btn btn-primary'> Records Found <span class='badge'> $total </span></li>";
} else {
echo "<br/><br/><br/><br/><div class='alert alert-danger fade in alert-dismissable'><i class='icon fa fa-warning'></i> Sorry no Records have found of that selected Date </div> ";
}
}
add_action('wp_ajax_daily_food_reports', 'daily_food_reports');
add_action('wp_ajax_nopriv_daily_food_reports', 'daily_food_reports'); // not really need
?>
我的Ajax代码是
jQuery(document).ready(function() {
// alert();
jQuery('#loader').hide();
jQuery('#searchoption').datepicker({
dateFormat : 'yy-mm-dd'
}).on('change', function (ev) {
var searchdata = jQuery(this).val();
// alert(searchdata);
jQuery.ajax({
url:daily_food_reports_obj.ajax_url,
type: 'POST',
//dataType: 'json',
data: 'searchvalue=' + searchdata,
beforeSend: function() {
// setting a timeout
jQuery('#loader').show();
},
success: function (data) {
jQuery('#loader').hide();
jQuery("#searchdata").html(data);
}
});
});
});
答
替换类型: 'POST' 与方法:。“POST” 检查控制台错误
+0
在加载输出(div) –
+0
daily_food_reports()函数时未加载整个网页。我删除了这个函数中的所有代码并添加了一个echo'test'字符串,但它不起作用 –
答
我认为你错过了ajax调用中的ajax动作参数
jQuery.ajax({
url:daily_food_reports_obj.ajax_url,
action : 'daily_food_reports',
type: 'POST',
//dataType: 'json',
data: 'searchvalue=' + searchdata,
beforeSend: function() {
// setting a timeout
jQuery('#loader').show();
},
success: function (data) {
jQuery('#loader').hide();
jQuery("#searchdata").html(data);
}
});
当您在前端调用AJAX时,您需要'ajaxurl'。 [阅读全文](https://codex.wordpress.org/AJAX_in_Plugins) –