Ajax调用和node.js


                    

我在将Ajax调用与node.js集成时遇到问题(我正在使用express.js)。
这是我的代码:</ p>

Page.html </ p>

  

      

        

€</ h1>
       </ div>
      

        
       </ div>
     </ div>

     </ div>

$(“#form1”)。submit(function()
             {
               $(“#prezzo”)。fadeIn(600,function()
                 {
                   $ .ajax({
                     网址:“ http:// localhost:3000 / prezzo”,
                     类型:“ GET”,

                     成功:功能(数据)
                     {
                       console.log(data);
                       $(“#h1”)。append(data.biglietto);
                     }
                   });
                 });
             });
</ script>
</ code> </ pre>

Page.js </ p>

  exports.prezzo = function(req,res){
req.getConnection(function(err,connection){
     connection.query(“我的查询”,function(err,rows){

       if(err)console.log(“选择错误:%s”,err);

       if(rows.length> 0){

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

     });
});
}
</ code> </ pre>

ajax调用不起作用,我的查询结果是白页,如下所示:
{
         最高赔率:2.70
} </ p>
     </ div>

展开原文

原文

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 }

1个回答


我在您的HTML中看不到#form1 </ code>,但是无论如何... </ p>

问题在于,当您触发一个Submit事件时,除了您在Submit处理程序中放置的内容外,还会发生一堆默认行为,例如用请求的结果重新绘制整个页面(您不会这样做) 想要)。</ p>

您需要做的是阻止默认行为,以便事件处理程序是提交时唯一发生的事情。 提交处理程序的前两行应如下所示:</ p>

  $(“#form1”)。submit(function(event){
     event.preventDefault();
</ code> </ pre>

然后,您可以继续执行其余代码。 </ p>
     </ div>

展开原文

原文

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.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问