Question

我认为我对这些基本概念（我已经阅读了大量资源和示例）缺乏一些了解这些函数如何在服务器端工作以及html如何与它们交互。我今天早些时候正在编写方法，并且完美地在服务器和html之间进行通信，操作我本地存储在服务器文件中的数组。作为参考，我将向您展示我是如何做到的。

html文件中的jQuery脚本：

$.post("/deck", { name: "Angel of Fury", power: 666 }, function(){

});

服务器文件：

    var express = require('express'),
        app = express(),
        db = require('./db'),
        bodyParser = require('body-parser'),
        controller = require('./controller');

    //add body parser middleware
    app.use( bodyParser.json() );       // to support JSON-encoded bodies
    app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
      extended: true
    })); 


    //Serves static pages
    app.use(express.static(__dirname + ('/')));

    //loads the html page
    app.get('/', function (req, res) {
        res.sendFile(__dirname + '/index.html');
    });


    var server = app.listen(3000, function () {
      var host = server.address().address;
      host = (host === '::' ? 'localhost' : host);
      var port = server.address().port;

      console.log('listening at http://%s:%s', host, port);
    });

      var deck = [ ];

      app.get('/deck', function(req, res) {
          res.send(deck);
      });

      app.post('/deck', function(req, res) {
          console.log(req.body);
          var card = req.body;
          deck.push(card);
          res.send(deck);
      });

鉴于此代码，我可以导航到＆＃34; localhost：3000 / deck，我所做的任何更改都存储在数组中并显示在此地址中。很简单。我已经迈出了一步，实现了一个数据库，mySQL并成功编写了插入，选择，删除等方法。

    <script>
$("submit").on("click", function(){
        $.post("/users", { name: username.value, password: psw.value, email: email.value}, function(){
            console.log("post successful..");
        });
    });
   </script>

    <body>
    <form>
            username:<br>
            <input type="text" name="username"><br>
            password:<br>
            <input type="password" name="psw"><br>
            email:<br>
            <input type="text" name="email"><br>
            <input type="submit" value="Submit">
        </form>
    </body>

我将上面的表单jquery脚本添加到html页面。并尝试在下面添加服务器功能。

app.get('/users', function (req, res) {

});

app.post('/users', function (req, res) {
    console.log(req.body);
});

我认为这可以让我在提交表单时使用 req.body 对象。请纠正我，如果我以错误的方式解决这个问题，我将不胜感激任何帮助/提示。

Answer 1

你可以做两件事：

使用event.preventDefault()停止表单提交。
改为将按钮类型更改为按钮。

由于您没有阻止表单提交，因此每当您单击提交按钮时，它都会提交表单，如果未提供发布方法属性，则会发出默认的get请求。

 $("submit").on("click", function(ev){
    ev.preventDefault();  // <--------  HERE
    $.post("/users", { name: username.value, password: psw.value, email: email.value}, function(){
        console.log("post successful..");
    });
 });

或者对你的标记进行一些小改动：

<input type="button"....../>

在表格中。

根据您的最新评论，在按钮中添加class / id属性并更改选择器：

 <input type="submit" id="submit"...../>

现在在js你必须使用它：

 $("#submit") // <---- notice the # which denotes the ID selector in jQuery.

HTML /服务器功能交互（GET，POST）

1 个答案: