我正在建立一个电子商务网站，在这个过程中，我面临一个问题，即如何将用户输入数据从 javascript 发送到后端

Posted 2023-02-26

【中文标题】我正在建立一个电子商务网站，在这个过程中，我面临一个问题，即如何将用户输入数据从 javascript 发送到后端

【英文标题】：I'm building an E-commerce website, in this process, I'm facing a problem that how to send users input data from javascript to the backend

【发布时间】：2022-01-22 15:07:08

【问题描述】：

我正在建立一个电子商务网站，在这个过程中，我遇到了一个问题，即如何将用户输入数据从javascript发送到后端。

对于后端，我使用的是 node.js (express)。

如果我得到了这个问题的解决方案，那么我可以将数据存储在数据库中

                .mb-3
                    label.form-label(for='username') User name
                    input#username.form-control(type='text' aria-describedby='emailHelp')
                .mb-3
                    label.form-label(for='Email') Email
                    input#email.form-control(type='Email')
                .mb-3
                    label.form-label(for='mobilenumber') Enter number
                    input#mobilenumber.form-control(type='number')
                .mb-3
                    label.form-label(for='password') Enter New Password
                    input#password.form-control(type='password')
                .mb-3
                    label.form-label(for='confirmpassword') Confirm Password
                    input#confirmpassword.form-control(type='password')
                .form-check.login-checkbox-container
                    input.bg-danger.border-danger#t-and-c-checkbox.form-check-input(type='checkbox' checked)
                    label.form-check-label.m-0(for='exampleCheck1') Agree To Our 
                      a.text-danger Terms And Conditions
                .form-check.login-checkbox-container
                    input.border-danger.form-check-input#upcoming-notification(type='checkbox')
                    label.form-check-label.m-0(for='exampleCheck1') recieve upcomimg offers and events mails
                button.btn.btn-success#new-user-submit-btn(type='button') Submit
                button.btn.btn-outline-primary#signups-login-btn(type='button') Login

此问题的任何解决方案

【问题讨论】：

请提供更多有用的信息。如何将数据发送到后端？后端看起来如何？您面临哪些错误？仅提供您的 html 不足以得到答案。

提交表单到服务器？

【参考方案1】：

使用 Ajax 在 Node 服务器中发送用户输入数据

---

我给出了将用户输入数据发送到节点服务器的代码示例。 使用 Jquery 和 Mongodb 和 nodejs。 这是一个简单的身份验证登录页面。

客户代码：

 <script>
        function login() 
            var name = $("#name").val();
            var password = $('#password').val();
            if (name !== '' && password !== '') 
                $.ajax(
                    url: "http://localhost:3000/login",
                    type: 'POST',
                    crossDomain: true,
                    dataType: 'json',
                    data: 
                        name: String(name),
                        password: password
                    ,
                    success: function(response) 
                        console.log(response.msg)
                        if (response.msg == 'verified') 
                            window.location.href = response.link;
                         else 
                            alert(response.msg)
                        
                    ,
                    error: function(error) 
                        console.log(error);
                    
                );
             else 
                alert('Please Enter UserName Password')
            
        
    </script>

服务器代码

    var app = require('express')();
var bodyParser = require('body-parser');
var http = require('http').Server(app);
var port = 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: true ));
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017";

app.get('/', function(req, res) 
    res.sendFile(__dirname + '/index.html');
)

app.post('/login', function(req, res) 
    var data = req.body;
    var name = data.name;
    var password = data.password;
    MongoClient.connect(url, function(err, db) 
        if (err) throw err;
        let dbo = db.db('demo-mrracer');
        var query =  name: name 
        dbo.collection('user_details').find(query).toArray(function(err1, result) 
            if (err1) throw err1;
            if (result.length > 0) 
                var d = result[0].password;
                if (d == password) 
                    console.log('user verified..');
                    db.close();
                 else 
                    db.close();
                    res.send( msg: 'Username or Password incorrect' )

                
             else 
                db.close();
                res.send( msg: 'Please Register..' )
            
        )
    )
)


app.listen(port, function() 
    console.log(`$port Running Successfully..`)
)

就是这样。

【讨论】：

为什么允许所有来源？既然有 fetch 使用 jquery 的目的是什么？

ajax 调用只能从 jquery 进行。就是这样。

是的，没错。但是 OP 甚至没有标记 jquery 那么为什么要首先使用它呢？

抱歉什么是 OP 我无法理解。

原始海报。这意味着提出问题的用户。