sql >> Base de Datos >  >> NoSQL >> MongoDB

Quiero redirigir a diferentes páginas en función de alguna condición.

No puede hacerlo si envía una solicitud mediante una llamada API de Ajax u otros métodos.

Como todos estos métodos son para implementar aplicación de página única , por lo que no se permite mostrar una página diferente.

¿Qué sucede cuando se cumple la condición y se solicita mostrar una página diferente?

El módulo que llamó a la API está esperando una respuesta en el navegador para obtener alguna respuesta de la API, sin embargo, su API está tratando de cargar una página HTML diferente que el navegador prohíbe y, por lo tanto, nunca se procesará a través de la llamada Ajax.

¿Cómo hacerlo?

Hay dos salidas:

  1. Aplicación de una sola página:al usar marcos de JavaScript como AngularJs, ReactJs lo ayudará simplemente cambiando las plantillas HTML y no toda la página.

Con Ajax puedes hacer esto:

HTML

<body>
    <div>   
        <div align="center">
        <form id="form1">
            <label>Please enter below details</label><br><br>
            <label>First Name *: </label><input id="FName" type="text" name="FName"/><br><br>
            <label>Last Name *: </label><input id="LName" type="text" name="LName"/><br><br>         
            <label>Email Address *: </label><input type="email" name="email"><br><br>
            <br><br>
            <input type="button" value="Submit" onClick:"submitForm()"/>
        </form>
        <div id="showValue"></div>
        </div>
    </div>
</body>

Javascript

function submitForm() {
    $.ajax({
        url: '/addName',
        type: 'POST',
        headers: headers,
        data: {
            "Fname": $("#FName").val(),
            "Lname": $("#LName").val(),
            "email": $("#email").val()
        },
        success: function(result) {
            //append result to your html
            //Dynamic view
            $("#form1").hide();
            var html = '<div><span>First Name: ' + result.fName + '</span><span>Last Name: ' + result.lName + '</span></div>';
            $("#showValue").html(html);    
        },
        error: function (error) {
            alert('error ',error);
        }
    });
}

Código del lado del servidor. Supongo que está usando express.js y body-parser

app.post('/addName', (req, res) => {
    //Insert into db
    var body = req.body;
    res.send({
    fName: body.FName,
    lName: body.LName
    });
});
  1. Usar form Método de envío:al usar esto, podrá mostrar la página; sin embargo, no podrá enviar la respuesta a la misma página, es decir,

HTML

<body>
    <div>   
        <div align="center">
        //Can't send params using this approach
        //Data will be send as query string
        <form action="/postedUser/" method="GET">
            <label>Please enter below details</label><br><br>
            <label>ID *: </label><input id="ID" type="text" name="ID"/><br><br>
            <input type="submit" value="Submit" /></form>
        </div>
    </div>
</body>

NodoJS

//If there will be res.send({});
// This won't be returned to same page. But your code doesn't do any such thing

router.get('/postedUser/', ensureAuthenticated, function(req, res) {
   User.findOne({_id: req.query.id}, function(err, data) {
        if (err) throw err;
        if (req.user._id == data._id) {
        res.redirect('/users/profile');
        } else {
        res.render('postedUser', {
            data: data
        });
        }
    });
});