1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>jQuery.post demo</title>
6 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
7</head>
8<body>
9
10<form action="/" id="searchForm">
11 <input type="text" name="s" placeholder="Search...">
12 <input type="submit" value="Search">
13</form>
14<!-- the result of the search will be rendered inside this div -->
15<div id="result"></div>
16
17<script>
18// Attach a submit handler to the form
19$( "#searchForm" ).submit(function( event ) {
20
21 // Stop form from submitting normally
22 event.preventDefault();
23
24 // Get some values from elements on the page:
25 var $form = $( this ),
26 term = $form.find( "input[name='s']" ).val(),
27 url = $form.attr( "action" );
28
29 // Send the data using post
30 var posting = $.post( url, { s: term } );
31
32 // Put the results in a div
33 posting.done(function( data ) {
34 var content = $( data ).find( "#content" );
35 $( "#result" ).empty().append( content );
36 });
37});
38</script>
39
40</body>
41</html>