jquery-ajax成功地发送数据，但完成了，失败了，总是无所事事

jquery ajax succefuly sends data but done fail always doing nothing

本文关键字：失败 无所事事 成功 数据 jquery-ajax      更新时间：2023-09-26

我正在为我的nodeJs应用程序进行签名页面。

当我提交表格时，所有数据都会发送到我的节点应用程序（所以这很好），

但是jqueryajax的done、fail、always函数一开始根本不起作用，过了一段时间（就像很多时候一样），它就会调用fail和always功能。不知道我的代码出了什么问题，一点错误都没有。

这是我的html客户端代码：

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Gatsbill</title>
    <link rel="stylesheet" href="public/css/reset.css">
    <link rel="stylesheet" href="public/css/connection.css">
</head>
<body>
    <div id="content">
        <a href="http://localhost:3001"><img src="public/images/icone.jpg" alt="gatsbill"></a>
        <div id="wrap">
            <div id="subscribe">
                <a href="http://localhost:3001/login" class="click">Se connecter</a>
                <p id="p">Pour vous inscrire,<br> Veuillez remplir les champs ci-dessous</p>
                <div id="message" class="message" style="display: none;"></div>
                <form method="post" id="form">
                    <input type="text" name="username" placeholder="Username" required autofocus id="username">
                    <input type="email" name="mail" placeholder="Email" required id="email">
                    <input type="password" name="password" placeholder="Password" required id="pass1">
                    <input type="password" name="password2" placeholder="Password" required id="pass2">
                    <input type="submit" name="submit" value="Create account" id="submit">
                </form>
            </div>
        </div>
    </div>
    <!-- Script -->
    <script src="public/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="public/js/signin.js"></script>

</body>
</html>

我的javascript客户端代码：

$(document).ready(function() {
    $("#form").submit(function(event){
        event.preventDefault();
        $("#p").hide();
        var pass1 = $('#pass1');
        var pass2 = $('#pass2')

        if (pass1.val().length > 6) {
            if (pass1.val() == pass2.val()) {
                var data = {
                    username: $("#username").val(),
                    email: $("#email").val(),
                    pass: $("#pass1").val()
                };
                var $inputs = $("#form").find("input, select, button, textarea");
                $inputs.prop("disabled", true);
                $.ajax({
                    url: "http://localhost:3001/signin",
                    type: 'post',
                    data: data,
                    dataType: 'json'
                })
                .done(function(data) {
                        alert("done");
                        console.log(data);
                })
                .fail(function( html ) {
                        alert('fail');
                })
                .always(function( html ) {
                        $inputs.prop("disabled", false);
                });
            } else {
                $('#message').text('Les mots de passes doivent être identiques').show();
                pass1.val('');
                pass2.val('');
            }
        } else {
            $('#message').text('Le mot de pass doit faire au moins 7 caractères').show();
            pass1.val('');
            pass2.val('');
        }
    });
});

这是我的节点应用程序，只是检查当前的帖子值

var express = require('express');
var swig = require('swig');
var ent = require('ent');
var bodyParser = require('body-parser');
var mongojs = require('mongojs');
var passport = require('passport');
var app = express();
var server = app.listen(3001);
var io = require('socket.io').listen(server);
// Environnement
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use("/public", express.static(__dirname + "/public"));
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
app.set('view cache', false);
swig.setDefaults({ cache: false });
//MongoDB
var db =  mongojs("mongodb://127.0.0.1:27017/maBase", ["users"]);

// Page Principale
app.get('/home', function(req,res){
    res.render('login.html',{});
});
// Page connection
app.get('/', function(req,res){
    res.render('index.html',{});
});
app.route('/signin')
    .get(function(req, res, next) {
        res.render('signin.html',{});
    })
    .post(function(req, res, next) {
        if (req.body.email) {
            console.log(req.body.username + req.body.email + req.body.pass);
        }
        else {
            console.log('not ok')
        }
    });
app.route('/login')
    .get(function(req, res, next) {
        res.render('login.html',{});
    })
    .post(function(req, res, next) {
    });

您的客户端JS代码看起来不错。问题出在服务器端代码上。在/signin POST请求函数中，您没有给出任何响应（您只是将其记录在控制台中）。这就是为什么您的客户端JS代码不会得到任何类型的响应来处理，无论是"成功"还是"失败"。这就是为什么在尝试了很多次之后，它最终变成了"永远"。总是函数在服务器超时或没有响应的情况下执行。请尝试从您的登录函数返回响应。您可以使用传递给请求函数的"res"参数提供的".json"方法来实现这一点。

像这样：

app.route('/signin')
.get(function(req, res, next) {
    res.render('signin.html',{});
})
.post(function(req, res, next) {
    if (req.body.email) {
        console.log(req.body.username + req.body.email + req.body.pass);
        res.json("Success");
    }
    else {
        console.log('not ok')
        res.json("Error"); 
    }
});

或者您想从服务器返回的任何其他内容。

相关文章：