我正在WordPress支持的网站上创建一个web表单，通过在提供的字段中输入日期和一些上/下限，然后提交表单，页面将查询MySQL表，选择符合这些条件的行，并将这些值分配到同一页面的表中。不幸的是，我很难理解如何让WordPress完成这个看似简单的任务。

根据我到目前为止所做的研究，从WordPress中查询SQL表需要三件事：

一种用PHP编写的表单，位于中。页面模板的php文件，一个实际执行SQL查询的函数，添加到主题函数中。php文件

一段Javascript代码，用于将上述两件事联系在一起

我为测试此表单而设置的网页是“http://www.finstability.com/serch/“。以下是我迄今为止所做的：

首先，表单代码：

<form type="post" action="" role="form" id="MRISearchForm" class="MRISerch">
    <p style="font-size: 16pt;">Date: <input style="font-size: 16pt;" type="date" name="inDate" value="12/31/2016" width="200" height="32"></p>
    <p style="font-size: 16pt;">Minimum MRI: <input style="font-size: 16pt;" type="number" name="inMRILow" value="70" min="0" max="100" width="200" height="32"></p>
    <p style="font-size: 16pt;">Maximum MRI: <input style="font-size: 16pt;" type="number" name="inMRIHi" value="100"  min="0" max="100" width="200" height="32"></p>
    <p style="font-size: 16pt;">Min. Market Cap: <input style="font-size: 16pt;" type="number" name="inMCapLow" value="" width="200" height="32"></p>
    <p style="font-size: 16pt;">Max. Market Cap: <input style="font-size: 16pt;" type="number" name="inMCapHi" value="" width="200" height="32"></p>
    <input type="hidden" name="action" value="mriSearch"/>
    <input type="submit" name="submit" value="Search" style="font-size: 18pt;">
    <input type="reset" style="font-size: 18pt;">
</form> 
<div id="search_results"></div>

第二，函数中的函数。php：

function mriSearch() {
    global $wpdb;
    echo "33333";   

    $inDate = $_POST[\'inDate\'];
    $inMRILow = $_POST[\'inMRILow\'];
    $inMRIHi = $_POST[\'inMRIHi\'];
    $inMCapLow = $_POST[\'inMCapLow\'];
    $inMCapHi = $_POST[\'inMCapHi\'];

    $query = \'SELECT * FROM mri_sql_test WHERE Date = %s AND MRIScore >= %s AND MRIScore <= %s\';

    $results = $wpdb->get_results( $wpdb->prepare($query, $inDate, $inMRILow, $inMRIHi) );
    echo $results;
    die();
}
add_action( \'wp_ajax_mriSearch\', \'mriSearch\' );    //If called from admin panel
add_action( \'wp_ajax_nopriv_mriSearch\', \'mriSearch\' );    //If called by non-user

第三，javascript序列将上述两者联系在一起。这是我最难理解的部分，因为我对Javascript有-0-先验知识：

<script type="text/javascript">
(function($){               
  // get our references
  var $form = $(\'form.MRISerch\'),
      $inDate = $(\'#inDate\'),
      $results = $(\'#search_results\');

  // AJAX search call
  function do_search() {

    // grab the query value from the search field
    var search_text = $search_field.val();

    // do a POST ajax call
    $.ajax({
      type: "POST",
      url: \'<?php echo admin_url(\'admin-ajax.php\'); ?>\',
      data: ({
        action: "mriSearch",
        search_text: search_text
      }),
      success: function (response){
        console.log(response);
        $results.html(response);
      }     
    });
  }

  // on submit, do the search but return false to stop page refresh
  $form.submit(function(e) {
    do_search();
    return false;
  });

})(jQuery);
</script>

到目前为止，我所能拼凑起来的大部分内容都是从类似的示例中学到的，例如this one. 如果有人能给我一个解释，最好是用我可以复制和修改的示例代码，因为为了完成这项任务，我会非常感激。

作为参考，单击上面链接页面上的Submit按钮当前只会导致页面重新加载并向http地址添加一组哈希，这对我来说意味着第二个代码块中的SQL查询可能没有执行。

$form.submit(function(e) {
    e.preventDefault();
    do_search();
});