Javascript 基于ajax搜索答案自动填写表单并提交

这个问题已经困扰了我好几天了，我在这里找到了一些帮助来解决我项目中的其他问题，似乎有人可以提供我忽略的见解

我承认我对sql、javascript、jquery、ajax、css和php非常陌生。我在大学里学了3年计算机科学（15年前），而编码和逻辑变化不大，语法和握手，计算发生的地方我要么忘记了，要么忽略了，要么一无所知

我已经完成了基于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（我的搜索表单所在位置）

然而，这会导致激活“action”搜索无法将答案发送到，并打开php（没有CSS…gasp..它只是不漂亮）。我觉得简单的javascript应该能够处理它，但我尝试了所有我能想到的（或查找）方法，使其无效

---

我意识到我在玩“深水区”，我在我的“水翼”，所以如果你能发发发慈悲，把我推到边缘，我将不胜感激。

首先，为每个链接打印一个点击处理程序的过程太繁琐了。相反，只需给每个链接一个类，并为该类的任何链接设置一个处理程序。在menusearch.php中：

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

echo“
”；
$string.=“”；

旁注-在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>

/*这是一个非标准的侦听器，绑定到body以便
通过ajax动态添加的元素，但在原始文档中却找不到。
此外，这可以缩短为一行，但为了清晰起见，我将其拆分。
单行版本被注释掉了*/
$（document.body）.on（'click'，'.reg_link'，function（）{
//searchforReg（$（this.attr（'id'））；
var id=$（this.attr（'id'）；//获取被单击元素的id
searchforReg（id）；//触发器函数
});
功能searchforReg（区域）{
var SearchData=“Table=R&Search=“+区域；
//如果您不熟悉console.log，它对调试有很大帮助
//log（'searchData='，searchData）；
$.ajax({
键入：“POST”，
url:'MenuSearch.php'，
数据：SearchData
})
.完成（功能（结果）{
$（“.Admin”）.html（结果）；
});
}

---

最后，我猜您在MenuSearch.php中对该数据进行了一些$u POST处理，但我没有看到上面的内容，因此我假设它正在工作…

为什么JS函数启动“搜索…”？您是从php编写函数吗？这不是JS函数…这是构成我的菜单栏（搜索栏所在位置）的未编号列表我把它包括进来是为了显示表单。JS文件就在上面。它以“$（document）.ready（function（）{”开头。它还包括include语句，我调用JS来显示它被包括在里面。是的，这篇文章正在工作……我觉得我已经包括了比我在其他问题上看到的更多的代码（可能是因为我没有研究过高级的东西）我会尝试一下。非常感谢，我很喜欢这个工作！它像冠军一样工作！这正是我想要的。非常感谢！我没有期望这么快就能得到答案，也没有期望得到很好的理解（以及足够的解释）很简单。我很高兴我对“echo”有了更好的理解。“hello world”是您学习的第一个命令之一，它可以包含更多内容。再次感谢！我检查了您的答案并投了赞成票……我还没有足够的声誉来这么做，但我已经学会了stackoverflow的价值，我相信我会赢得它们（只是不想认为我在隐瞒投票）

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

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

<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>