Javascript HTML/服务器功能交互（获取、发布）_Javascript_Jquery_Html_Node.js_Express

Javascript HTML/服务器功能交互（获取、发布）

javascript jquery html node.js express

Javascript HTML/服务器功能交互（获取、发布）,javascript,jquery,html,node.js,express,Javascript,Jquery,Html,Node.js,Express,我认为我对这些基本概念（我已经阅读了大量的参考资料和示例）缺乏一些了解，这些基本概念是关于这些函数如何在服务器端工作以及html如何与它们交互的。今天早些时候，我编写了一些方法，在服务器和html之间进行了完美的通信，操作了存储在服务器文件本地的一个数组。作为参考，我会告诉你我是怎么做的 html文件中的jQuery脚本： $.post("/deck", { name: "Angel of Fury", power: 666 }, function(){ }); var expres

我认为我对这些基本概念（我已经阅读了大量的参考资料和示例）缺乏一些了解，这些基本概念是关于这些函数如何在服务器端工作以及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);
      });

服务器文件：

$.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);
      });

有了这段代码，我可以导航到“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>

我认为这将允许我在提交表单时使用请求正文对象。请纠正我的错误，我将非常感谢任何帮助/提示。

您可以做两件事：

使用

event.preventDefault（）

停止表单提交

将按钮类型改为button

由于您没有阻止表单提交，因此，每当您单击“提交”按钮时，它都会提交表单，如果未提供post的方法属性，它会发出默认的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..");
    });
 });

$（“提交”）。点击，功能（ev）{
ev.preventDefault（）；//您可以做两件事：
使用event.preventDefault（）
停止表单提交
将按钮类型改为button
由于您没有阻止表单提交，因此，每当您单击“提交”按钮时，它都会提交表单，如果未提供post的方法属性，它会发出默认的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..");
    });
 });

$（“提交”）。点击，功能（ev）{
ev.preventDefault（）；//在您的服务器中，当您发布到/users
端点时，您是否看到应用程序.post（'users'）
回调的日志响应？不，我认为该函数甚至没有被命中。当$（'submit'）调用时，$.post（'/users'）
调用是否正确。on（'click'）
被调用（检查开发工具中的网络选项卡以确认）？我没有看到任何错误。另外，我在jquery回调中有一个console.log来验证它是否成功，我没有收到任何控制台消息。只是出于好奇，抛开所有技术问题不谈，我的做法是否正确？我从表单中获得的数据将被发送到mySQL数据库。在您的服务器中，您是否看到记录的响应当你发布到/users
端点时，你的app.post（'users'）
回调的e？不，我认为该函数甚至没有被命中。调用$（'users'）
时，调用$（'submit'）时是否正确调用了.post（'/users'）。（请检查开发工具中的网络选项卡以确认）？我没有看到任何错误。另外，我在jquery回调中有一个console.log来验证它是否成功，我没有收到任何控制台消息。只是出于好奇，抛开所有技术问题不谈，我这样做是否正确？我从表单中获得的数据将被发送到mySQL数据库。停止表单提交是什么意思？我希望表单提交信息。对不起，我是新手。正在更新…！但简而言之，你必须在js代码中这样做。我应该在哪里添加preventDefault方法？我在onclick jquery脚本之后添加了preventDefault，将输入类型更改为button，现在按钮似乎完全死掉了。好的，现在我可以看到对的另一个更改确实。向按钮添加类或ID属性并在代码中使用。停止表单提交是什么意思？我希望表单提交信息。抱歉，我是新手。正在更新…！但简而言之，您必须在js代码中执行此操作。我应该在何处添加preventDefault方法？我在onclick jquery scr之后添加了preventDefaultipt，将输入类型更改为button，现在按钮似乎完全失效。好的，现在我可以看到还有一个更改要做。向按钮添加类或ID属性，并在代码中使用它。
 $("#submit") // <---- notice the # which denotes the ID selector in jQuery.