title: simple flask app server passing data with ajax and jquery
body: <p>I've spent all day tinkering with this app trying to get some simple information passed to the back end of the application. I am using a simple flask app and trying to send data from a search query to the back end using ajax. However, I have been completely unsuccessful. Any help would be greatly appreciated.</p>
  
  <p>Below is app.py</p>
  
  <pre><code>from scraper import scrape
  from flask import Flask, render_template, jsonify, make_response, request
  import json
  app = Flask(__name__)
  
  @app.route("/")
  def index():
  
      entries = json.dumps(scrape("video games"))
      return render_template('index.html', entries= entries)
  
  @app.route('/parse_data', methods=['GET', 'POST'])
  def parse_data():
      if request.method == "GET":
          #data = request.form("blah")
          #print("blah")
          search = request.json
          #new_search = json.dumps(scrape(data))
          return search
      return render_template('index.html')
  
  if __name__ == "__main__":
      app.run(debug=True, host='0.0.0.0', port=5000)
  </code></pre>
  
  <p>and index.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Flask app&lt;/title&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="topnav"&gt;
      &lt;a class="active" href="#home"&gt;Home&lt;/a&gt;
      &lt;a href="#about"&gt;About&lt;/a&gt;
      &lt;a href="#contact"&gt;Contact&lt;/a&gt;
      &lt;form name = "textbox" id = "textbox"&gt;
        &lt;input id ="textbox" name="textbox" type="text" placeholder="Search.."&gt;
        &lt;button type="submit"&gt;submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;p&gt;you searched: {{search}} &lt;/p&gt;
  
    &lt;div id="div1"&gt;
    &lt;p id="p1"&gt;&lt;/p&gt;
    &lt;p id="p2"&gt;&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;script&gt;
  
  var value = $('.textbox').val();
  //alert(value);
  $.ajax({
    type: 'POST',
    url: "/parse_data",
    data: JSON.stringify(value)
    contentType: 'application/json',
    success: function(data){
      alert("success")
    }
  });
  
  
  
  var jsonz = {{ entries|tojson }};
  
  
  
  var s = JSON.parse(jsonz);
  
  
  
  var i;
  for (i = 0; i &lt; s.length; i++) {
    var para = document.createElement("p");
    var node = document.createTextNode(s[i].product_name + "\n" + s[i].product_link);
    para.appendChild(node);
  
    var element = document.getElementById("div1");
    element.appendChild(para);
  }
  
  
  
  
  //document.getElementById("user").innerHTML =
  //obj;
  //"Name: " + obj.product_name + "&lt;br&gt;" +
  //"Location: " + obj.product_link;
  &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>