title: Submit a form and get a JSON response with jQuery
body: <p>I expect this is easy, but I'm not finding a simple explanation anywhere of how to do this.  I have a standard HTML form like this:</p>
  
  <pre><code>&lt;form name="new_post" action="process_form.json" method=POST&gt;
        &lt;label&gt;Title:&lt;/label&gt;
        &lt;input id="post_title" name="post.title" type="text" /&gt;&lt;br/&gt;
  
        &lt;label&gt;Name:&lt;/label&gt;&lt;br/&gt;
        &lt;input id="post_name" name="post.name" type="text" /&gt;&lt;br/&gt;
  
        &lt;label&gt;Content:&lt;/label&gt;&lt;br/&gt;
        &lt;textarea cols="40" id="post_content" name="post.content" rows="20"&gt;&lt;/textarea&gt;
      &lt;input id="new_post_submit" type="submit" value="Create" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'd like to have javascript (using jQuery) submit the form to the form's action (process_form.json), and receive a JSON response from the server.  Then I'll have a javascript function that runs in response to the JSON response, like</p>
  
  <pre><code>  function form_success(json) {
       alert('Your form submission worked');
       // process json response
    }
  </code></pre>
  
  <p>How do I wire up the form submit button to call my form_success method when done?  Also it should override the browser's own navigation, since I don't want to leave the page.  Or should I move the button out of the form to do that?</p>