Ajax call and node.js

Question

I have a problem integrating ajax calls with node.js (I am using express.js). This is my code:

Page.html

<div id = "prezzo" class="col-md-12" style = "display : none">
      <div class="col-md-2 col-md-offset-3">
        <h1 id = "h1">€ </h1>
      </div>
      <div class="col-md-4">
        <input style="margin-top: 17px" type="submit" class="btn btn-sommatinese btn-lg btn-block" />
      </div>
    </div>

    </div>
<script type = "text/javascript">

$("#form1").submit(function()
            {
              $("#prezzo").fadeIn(600, function()
                {
                  $.ajax({
                    url: "http://localhost:3000/prezzo",
                    type: "GET",

                    success: function(data)
                    {
                      console.log(data);
                      $("#h1").append(data.biglietto);
                    }
                  });
                });
            });
</script>

Page.js

exports.prezzo = function(req,res) {
req.getConnection(function(err,connection) {
    connection.query("my query", function(err,rows) {

      if(err) console.log("Error selecting : %s", err);

      if(rows.length > 0) {

          totale = rows[0];
          res.send(totale);
          //console.log(totale);
        }

    });
});
}

The ajax call doesn't work, what I have is a white page with the result of my query, like this: { biglietto: 2.70 }

Answer 1

I can't see #form1 in your HTML, but anyway ...

The problem is that when you fire a submit event, a whole bunch of default behavior occurs in addition to what you put in your submit handler, such as repainting the whole page with the results of the request (which you don't want).

What you need to do is prevent the default behavior, so that your event handler is the only thing that happens on submit. The first two lines of your submit handler should look like this:

$("#form1").submit(function(event){
    event.preventDefault();

Then you can continue on with the rest of your code.