title: Ajax.done returning undefined
body: <p>I'm a newcomer to JS and Jquery, and I can't figure out how Ajax works for the life of me.
  I'm working on a website with flask, and I need a way to send to pieces of data to a url, where they're appended to a list, after which a success message pops up.
  However, I can't seem to get this properly.</p>
  <pre><code>$(document).ready(function(){
  
            $(&quot;#newPatternForm&quot;).on(&quot;submit&quot;, function(event){
                  var setClass = document.getElementById(&quot;classes&quot;).value;
                  var newPattern = $(&quot;#newPattern&quot;).val();
                  $.ajax({
                      data:{
                          setClass: setClass,
                          newPattern: newPattern,
                      },
                      type: &quot;POST&quot;,
                      url: &quot;/get_pattern&quot;,
                  }).done(function(data){
                      alert(&quot;success&quot;)
                      var successMsg = &quot;&lt;p&gt;Class: &quot; + data + &quot;&lt;br&gt;Pattern: &quot; + data;
                      $(&quot;#newPatternFooter&quot;).append($.parseHTML(successMsg));
                  });
              });
          });
  </code></pre>
  <p>The Flask code</p>
  <pre><code>@app.route('/get_pattern', methods=[&quot;POST&quot;])
  def get_pattern():
      set_class = request.form[&quot;setClass&quot;]
      new_pattern = request.form[&quot;newPattern&quot;]
      pattern_suggests.append([set_class, new_pattern])
      return set_class, new_pattern
  </code></pre>
  <p>I've tried several combinations while declaring successMsg, but all of them return at least one of them as undefined. How do I solve this?</p>