Question

我使用Node.js作为服务器端，使用express和ejs，使用Twitter Bootstrap作为前端。该页面有一个带有表单和2个提交按钮的模态。 我想显示不同的消息，具体取决于用ajax提交的按钮（稍后我会添加其他处理但是现在我只想显示消息）。我的问题是我无法获得提交按钮的值。

index.ejs

<!DOCTYPE html>
<html lang="fr">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>test</title>

    <link href="/css/style.css" rel="stylesheet">

    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <button type="button" class="btn btn-lg btn-primary" 
        data-toggle="modal" data-target="#modalCreateMdl">Click here</button>


        <div id="modalCreateMdl" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Form</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="formTest" action="test" method="post">
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" name="sub" class="btn btn-primary" value="submit1">SUBMIT 1</button>
                                    </div>
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" name="sub" class="btn btn-primary" value="submit2">SUBMIT 2</button>
                                    </div>
                                </div>
                                <div id="msgTest" style="display:none"></div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="/js/ajax.js"></script>
    </body>
</html>

test.js

var express = require('express');
var bodyParser = require('body-parser')

var app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("/home/mainuser/test_node/"));

app.post('/test', function(req, res) {
    console.log(req.body.sub);
    if(req.body.sub == "submit1") {
        obj = {test : "json1"};
        console.log("submit number 1");
    } else if(req.body.sub == "submit2") {
        obj = {test : "json2"};
        console.log("submit number 2");
    } else {
        obj = {test : "json_default"};
        console.log("default");
    }
    res.json(obj);
});

app.get('/', function(req, res) {
    res.render('index.ejs');
});

app.listen(8080);

ajax.js

$(document).ready(function() {
    $('#formTest').submit(function() {
        $.ajax({
            method : $(this).attr('method'),
            url : $(this).attr('action'),
            data : $(this).serialize(),
            success : onSuccessLoad,
            error : onError
        });
        return false;
    });
});
// ready

function onSuccessLoad(json) {
    $('#msgTest').fadeOut('slow');
    $('#msgTest').html(json.test);
    $('#msgTest').fadeIn('slow');
}

function onError(returnation) {
    alert("problem");
}

当我点击SUBMIT 1按钮时，我在终端中得到以下输出：

undefined
default

和json_default显示在页面上。

什么时候应该在终端：

submit1
submit number 1

和页面上的json1。

当我删除ajax.js时，控制台输出很好，但显然json显示在一个新页面中，这不是我想要的。

Answer 1

＆＃39; $（本）.serialize（）＆＃39;返回＆＃39;字符串＆＃39;，不是＆＃39;对象＆＃39;

Answer 2

<button type="button" class="btn btn-lg btn-primary"
                    data-toggle="modal" data-target="#modalCreateMdl">Click here</button>


    <div id="modalCreateMdl" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Form</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="formTest" action="test" method="post">
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="text" name="sub" class="btn btn-primary" value="submit1">
                            </div>
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="text" name="sub" class="btn btn-primary" value="submit2">
                            </div>
                        </div>
                        <div id="msgTest" style="display:none"></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
 <script>
     $('input[name="sub"]').on('click',function() {
         var serializeStr = $('#formTest').serialize();
         var serializeArray = serializeStr.split('&');
         var params = {};
         for(var i=0;i<serializeArray.length;i++){
            var value = serializeArray[i].split('=');
             params[value[0]] = value[1];
         }
         $.ajax({
             method : $('#formTest').attr('method'),
             url : $('#formTest').attr('action'),
             data : params,
             success : onSuccessLoad,
             error : onError
         });
         return false;
     });
     function onSuccessLoad(json) {
         $('#msgTest').fadeOut('slow');
         $('#msgTest').html(json.test);
         $('#msgTest').fadeIn('slow');
     }

     function onError(returnation) {
         alert("problem");
     }

NodeJs AJAX提交按钮的未定义值

2 个答案: