自动填写表单并根据ajax搜索答案提交

时间:2016-04-10 03:11:24

标签: javascript php jquery html ajax

这个问题几天令我感到沮丧,而且我在这里找到了一些关于我项目中其他问题的帮助,似乎有人可以提供我忽视的洞察力。

我承认我是sql,javascript,jquery,ajax,css和php的新手。我在大学里做了3年的计算机科学(15年前)虽然编码和逻辑没有太大改变,但它的语法和握手,以及计算正在发生的地方,我已经忘记,忽视或者无知。 / p>

我已经完成了基于ajax的搜索提交。 此搜索在标有.Admin的div中显示目标php 这很有效。

它的答案是显示树和搜索节点上方和下方的节点。

我想让树中的每个节点成为其自身节点的搜索结果的可点击链接。

在php结果中,我编写了它来编写一个javascript函数的html调用,它为每个函数生成一个唯一的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;";
            };

我已经尝试过多次迭代函数&#34; searchforReg(&#39; $ Reg&#39;);没有用...我觉得应该是这样的:

    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();
        });
    });
然而,这会导致激活&#34;动作&#34;搜索未能发送答案并打开php(没有CSS ...喘气..它只是不漂亮)我觉得一个简单的JavaScript应该能够处理它,但我尝试了所有不同的方式,我可以想到(或抬头看)让它起作用无济于事。

我意识到我正在玩#&#34;深渊,&#34;我和我的水翼&#34;所以如果你能怜悯并把我推到极致,我会很感激。

1 个答案:

答案 0 :(得分:0)

首先,为每个链接打印点击处理程序的过程是过度的。相反,只需为每个链接提供一个类,并为该类的任何链接设置单个处理程序。在menusearch.php中:

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

旁注 - 在PHP中,如果你回复&#34; double&#34;引号,变量将被渲染,因此无需连接。这就是为什么$ Reg只是闲逛的原因。如果你回答单曲&#39;引号,字符串按字面解释。

然后在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处理,但是我没有看到上面这一点,所以我假设它正在工作..