Ik wil omleiden naar verschillende pagina's op basis van een voorwaarde

U kunt dit niet doen als u een verzoek indient met behulp van een API-aanroep van Ajax of andere methoden.

Aangezien al deze methoden bedoeld zijn om Single Page Application te implementeren, , dus het weergeven van een andere pagina is niet toegestaan.

Wat gebeurt er als aan de voorwaarde is voldaan en wordt gevraagd om een andere pagina weer te geven?

De module die API heeft aangeroepen, wacht op een reactie van de browser om een reactie van de API te krijgen, maar uw API probeert een andere HTML-pagina te laden die door de browser wordt verboden en u wordt dus nooit weergegeven via een Ajax-aanroep.

Hoe het te doen?

Er zijn twee manieren om eruit te komen:

Toepassing met één pagina:met behulp van JavaScript-frameworks zoals AngularJs, zal ReactJs u helpen door alleen HTML-sjablonen te wijzigen en niet de hele pagina.

Met Ajax kun je dit doen:

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);
        }
    });
}

Server-side code Ik neem aan dat je express.js en body-parser gebruikt

app.post('/addName', (req, res) => {
    //Insert into db
    var body = req.body;
    res.send({
    fName: body.FName,
    lName: body.LName
    });
});

Gebruik form Verzendmethode:hiermee kunt u de pagina weergeven, maar u kunt geen reactie terugsturen naar dezelfde pagina, d.w.z.

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>

NodeJS

//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
        });
        }
    });
});