个人中心
gpt4 book ai didi

javascript - HTML/服务器函数交互(GET、POST)

转载 作者：行者123 更新时间：2023-12-02 14:12:53 25 4
gpt4 key购买 nike

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

给出这段代码，我可以导航到“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 对象。如果我以错误的方式处理此问题，请纠正我，我将不胜感激任何帮助/提示。

最佳答案

你可以做两件事:

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

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

关于javascript - HTML/服务器函数交互(GET、POST)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39343126/

25 4 0
文章推荐： javascript - JSON-如何从json字符串中获取单个内容
文章推荐： javascript - 比较忽略特殊字符 "ä"的 JavaScript 字符串
文章推荐： javascript - Passport.use 不是一个函数
文章推荐： javascript - 在 Angularjs 中选中一个或多个复选框后激活按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com