Search the database and load the returned query onto the page using jQuery and AJAX
Question
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.
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. 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. So I need to send one variable and get multiple variables back. Does that help you help me more?
1 answers
solution1
0 2011-01-11 18:35:12
Here's a sample of ajax + html append:
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.