简体   繁体   English

搜索数据库,然后使用jQuery和AJAX将返回的查询加载到页面上

[英]Search the database and load the returned query onto the page using jQuery and AJAX

I am doing some work on a page where I want to search the database based on what the user is looking for and then give back the results on the same page. 我正在一个页面上做一些工作,在该页面上我要根据用户的搜索内容搜索数据库,然后在同一页面上返回结果。 I know how to make things disappear from a page using jQuery, but I would like to know how to append them to the page using AJAX. 我知道如何使用jQuery使事物从页面中消失,但是我想知道如何使用AJAX将其添加到页面中。

The short of what I'm asking, I want to query the DB, and have the results pop up on the website without reloading the page. 我要问的简短内容是,我想查询数据库,并在不重新加载页面的情况下将结果弹出到网站上。

Well the answer below is not really answering my question so I will give a more detailed question with an example. 好吧,下面的答案并没有真正回答我的问题,因此我将通过示例给出更详细的问题。

    <input type="textbox" id="name" name="name" />
    <input type="button" id="search" name="search" value="Search the Database" /> <br/><br/>
    <label class="userinfo">First Name: </label><input type="text" class="userinfo" id="first" name="first" /> <br/>
    <label class="userinfo">Last Name: </label><input type="text" class="userinfo" id="last" name="last" /> <br/>
    <label class="userinfo">Username: </label><input type="text" class="userinfo" id="uname" name="uname" /> <br/>
    <label class="userinfo">E-Mail: </label><input type="text" class="userinfo" id="email" name="email" /> <br/>
    <label class="userinfo">Admin Status: </label><input type="text" class="userinfo" id="admin" name="admin" /> <br/>

What happens is that I search the database based on the first textbox, the AJAX will happen when the search button is pressed, it will go to another page and do the query on the db. 发生的是,我基于第一个文本框搜索数据库,按下搜索按钮时将发生AJAX,它将转到另一页并在数据库上进行查询。 How do I get those results back to the original page to fill out the textboxes below? 如何将这些结果返回到原始页面以填写下面的文本框? The texboxes below are hidden until the search button is clicked. 在单击搜索按钮之前,将隐藏下面的texbox。 So I need to send one variable and get multiple variables back. 因此,我需要发送一个变量并返回多个变量。 Does that help you help me more? 这对您有帮助吗?

Here's a sample of ajax + html append: 这是ajax + html附加的示例:

   <html>
        <head>
        <script type="text/javascript">

        $(function() {

        $('.go-right').click(function(){

            $.ajax({

                        type: "POST",
                        url: "process_thumbs.html",
                        data:   "showposts=25",
                        success: function(html){
                            $("#output").html(html);
                        }

            });  
        });

            });

        </script>

        </head>
        <body >


        <div id="output"></div>

        <a class="go-right">RIGHT</a>

        </body>
        </html>

of course "process_thumbs.html" is a dynamic page returning the results of the query. 当然,“ process_thumbs.html”是返回查询结果的动态页面。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM