1. form 自带 submit handler

form 表单默认自带“提交刷新页面”的行为。如果需要在【提交】按钮上绑定自己的事件处理函数，必须先禁止默认的 submit handler，否则点击提交按钮会刷新整个页面。

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.post demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..."> <input type="submit" value="Search"> </form> <div id="result"></div> <script> // Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var form = $( this ), term = form.find( "input[name='s']" ).val(), url = form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { form.find( "#result" ).empty().append( data ); }); }); </script> </body> </html>

2. 要点

• event.preventDefault() 能阻止表单默认刷新。
• $.post(url, data) 返回一个 promise，通过 .done() 处理结果。