WordPressカスタムページを呼び出すAjax

Question

私はWordPressの子テーマでカスタムページを作成します。私は子テーマfunction.Nowにページを含んでおり、Ajaxを使用してデータベーステーブルからいくつかのデータを表示したいと考えています。しかし、実際の結果ではなく同じWebページを表示します。助けて？

テンプレートページコード

<?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>&nbsp;&nbsp;<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); 
          } 
         }); 
        }); 
       }); 

Answer 1

タイプを交換している：メソッドを持つ 'POST'：。。 "POST」 エラーについて、コンソールをチェック

Answer 2

I 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); 
     } 
    });