自動填寫表格並基於ajax搜索答案提交

Question

幾天來，這個問題讓我感到沮喪，並且由於我在項目中遇到的其他問題在這里找到了幫助，似乎有人可以提供我所忽略的見解。

我承認我對sql，javascript，jquery，ajax，css和php非常陌生。 我在大學里讀了3年的計算機科學課程（15年前），盡管編碼和邏輯並沒有太大變化，但其語法和握手以及計算發生的地方卻使我忘記，忽視或變得無知。

我已經完成了基於Ajax的搜索提交。 此搜索在標有.Admin的div中顯示目標php，效果非常好。

它的答案是顯示樹以及搜索到的節點上方和下方的節點。

我想使樹中的每個節點成為指向其自己節點的搜索結果的可單擊鏈接。

在php結果中，我將其編碼為在javascript函數的html調用中編寫，並為每個javascript生成了唯一的ID，以及它自己的函數調用。 （無論這是否是我嘗試過的一個好主意），我認為，然后很容易使javascript使用其知道的信息用創建的鏈接填寫表單，然后重新提交，因為無需再次搜索即可刷新。 我嘗試讓php編寫此腳本，以便它與頁面一起開發，並且我嘗試編寫腳本並將其包含在父頁面中，以便已經加載了該腳本...我不確定它應該去哪里或應如何編寫。

我可能會缺少一個組成部分，或者我想用代碼做更多的事情，或者沒有完全掌握操作的發生位置，而需要重新考慮它。

我將嘗試包含所有相關代碼，如果不夠的話，我會很樂意添加。 提前致謝。

CallSearch.js

    $(document).ready(function() {
        $('#Search').submit(function(event) {
            $.ajax({
                type        : 'POST', 
                url         : 'MenuSearch.php',
                data        : $( this ).serialize()
            })
            .done(function(results) {
                $(".Admin").html(results);
            });
        event.preventDefault();
        }); 
    });

Menu.php（我的搜索表在其中）

    <script src="/JS/CallSearch.js"></script>
     ...
    <li><a>Search</a> <input type= "text" name="Search" id="search_name" class="search-group">
                <ul>
                    <li><input type="radio" name="Table"  id="TableRegion" value="R" class="search-group" checked><label for="TableRegion">Region</label></li>
                    <li><input type="radio" name="Table"  id="TableGrape" value="G" class="search-group"><label for="TableGrape">Grape</label></li>
                    <li><input type="radio" name="Table"  id="TableWine" value="W" class="search-group"><label for="TableWine">Wine</label></li>
                    <li><button type="submit" id="SubmitSearch">Submit</button></li>
                </ul>
            </li>
        </form>
    ...

MenuSearch.php

    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'Webpage');
    define('DB_PASSWORD', 'Guest');
    define('DB_DATABASE', 'database');
    $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
    ...
    $sqlp ="SELECT * FROM region a JOIN Regionclosure b ON a.idregion=b.parent WHERE b.child= $idReg ORDER BY b.Depth DESC;";
    ...
    $resultp = mysqli_query($db, $sqlp);
            $string ="";
            while($row = mysqli_fetch_assoc($resultp)){
                $Reg = $row["RegName"];
                $Parent= $row["Parent"];
                echo $string . "|___";
                if($_SESSION["Level"] == 'A' or $_SESSION["Level"] == 'C') 
                    echo $Parent . " - ";
                echo  "<a href='#' id='$Reg'>" . $Reg . "</a><br>";
                echo "
                    <Script>
                        $('#$Reg').click(function(){ searchforReg('$Reg'); return false; });
                    </script>";
                $string .= "&nbsp;&nbsp;&nbsp;";
            };

我已經嘗試對“ searchforReg（'$ Reg'）;函數進行多次迭代；無濟於事……我覺得應該像這樣：

    function "searchforReg(Region){
    SearchData= "Table=R&Search="+$(Region).val;
    (function() {
        $.ajax({
            type        : 'POST', 
            url         : 'MenuSearch.php',
            data        :  SearchData
        })
        .done(function(results) {
            $(".Admin").html(results);
        });
    event.preventDefault();
        });
    });

但是，這導致激活“操作”搜索失敗，無法將答案發送給，並打開了php（沒有CSS ...喘着氣。它只是不漂亮），我覺得一個簡單的javascript應該可以處理它，但是我嘗試了所有可以想到（或查找）的方法，以使其無濟於事。

我意識到我在“深底游戲”中玩，並且在“水翼”中玩，所以如果您可以寬容並推動我前進，我將不勝感激。

Answer 1

首先，為每個鏈接打印一個單擊處理程序的過程過高。 相反，只需為每個鏈接提供一個類，然后為該類的任何鏈接設置單個處理程序。 在menusearch.php中：

echo  "<a href='#' id='$Reg' class='reg_link'> $Reg </a><br>";
$string .= "&nbsp;&nbsp;&nbsp;";

旁注-在PHP中，如果回顯“雙”引號，則將呈現變量，因此無需連接。 這就是$ Reg只是閑逛的原因。 如果使用“單引號”進行回顯，則字符串將按字面意義進行解釋。

然后在menu.php中，我們有一些javascript：

<script>    

    /* This is a non-standard listener, bound to the body so that any
    dynamically added elements pulled in via ajax, but not in the original document can still be found.
    Also, this can be shortened to a single line, but I split it up for clarity.
    The single-line version is commented out.  */

    $(document.body).on('click', '.reg_link', function(){
        //searchforReg($(this).attr('id'));
        var id = $(this).attr('id'); //get the id of clicked element
        searchforReg(id); //trigger function
    });

    function searchforReg(Region){
        var SearchData= "Table=R&Search="+Region;
        //If you're not familiar with console.log, it's a huge help in debugging
        //console.log('searchData = ', SearchData);
        $.ajax({
            type        : 'POST', 
            url         : 'MenuSearch.php',
            data        :  SearchData
        })
        .done(function(results) {
            $(".Admin").html(results);
        });
    }
</script>

最后，我猜想您在MenuSearch.php中有一些針對該數據的$ _POST處理，但是我沒有在上面看到，所以我假設它正在工作...