WordPress shortcode无法获取POST/GET参数 表单提交异常求助

• 需要实现根据输入框提交的内容，动态从数据库查询数据并渲染结果
• 当前使用自定义短代码时，无法正常读取POST/GET请求传递的参数
• 控制台显示表单发起的POST请求执行失败，对应页面加载丢失
• 不提交GET/POST参数、直接打开页面时，页面可正常运行
• 预期实现效果：表单提交后重定向回当前页面，短代码内部可正常获取POST/GET参数完成查询逻辑

• POST请求失败的控制台界面
  
• 无请求时的正常页面运行界面
  

<?php global $wpdb;
//$result;
//$user_par1;

//do_action("init")
//$result = GetPagePara();
// $result = $wpdb->get_results( "SELECT Name, Status, ID, Image FROM threatplants");
// $res = "<div class='table_container'><table>";
//     foreach ($result as $row) {
//         $res = $res . "<tr><td>" . $row->Name  . "</td><td>" . $row->Status . "</td><td>". $row->ID . "</td><td>" . '<img src="data:image/jpeg;base64,' . base64_encode($row->Image) . '"/>' .  "</td></tr>";
//     }
?>


<div class="search-container">
    <form action="<?php the_permalink(); ?>" method="post">
        <input type="text" placeholder="Search..." name="name" id="name" >
        <button id="search" type="submit" >Submit</button>
    </form>
</div>
<div id="content">

</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var content = $("#content");
        var name = $("#name");
        var content = $("#content");
        var name = $("#name");
        <?php
            //global $post;
            //$result;
            $user_par1 = $_POST['name'];
            $user = $wpdb->prepare('lower(CommonName) LIKE %s', $user_par1);

            if($user_par1!=null || $user_par1!=""){
                $result = $wpdb->get_results( "SELECT ID, CommonName, Status, Image FROM threatplants WHERE lower(CommonName) LIKE" . $user_par1);
            }else{
                $result = $wpdb->get_results( "SELECT ID, CommonName, Status, Image FROM threatplants Limit 9");
            }
            $res = "";
            $num = count($result);
            $row = $num/3;
            if($num%3 != 0){
                $row += 1;
            }
            
            $r = 0;
            $c = 0;
            while($r < $row){
                $res .= "<div class='row'>";
                $card_count = 0;
                for (; $c < $num and $card_count < 3; $c++) {
                    $res = $res . '<div class="column"> <div class="card">' . '<img width="200" height="200" src="data:image/jpeg;base64,' . base64_encode($result[$c]->Image) . '"/>' . "<label>SPRAT TaxonID: </label>". "<p>". $result[$c]->ID ."</p>" . "<label>Common Name: </label>"."<p>" . $result[$c]->CommonName . "</p>" ."<label>Status: </label>". "<p class='". str_replace(" ", "-", $result[$c]->Status) ."'>". $result[$c]->Status ."</p>" . "</div></div>";
                    $card_count ++;
                }
                $res = $res . "</div>";
                $r++;
            }
        ?>
        var res = <?php echo json_encode($res); ?>;
        content.html(res);
    })
</script>

<style>
    .Extinct{
        color:red;
    }

    .Endangered {
        color: blue;
    }
    .Critically-Endangered{
        color: yellow;
    }
    .Vulnerable{
        color: green;
    }
    * {
        box-sizing: border-box;
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    .column {
        float: left;
        width: 33%;
        padding: 0 10px;
    }

    .row {margin: 0 -5px;}

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        padding: 16px;
        text-align: center;
        background-color: #f1f1f1;
    }

    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
            display: block;
            margin-bottom: 20px;
        }
    }
</style>

内容的提问来源于stack exchange，提问作者Stan