MongoDB
 sql >> Datenbank >  >> NoSQL >> MongoDB

Ich möchte basierend auf einer bestimmten Bedingung auf verschiedene Seiten umleiten

Sie können dies nicht tun, wenn Sie eine Anfrage mit einem API-Aufruf von Ajax oder anderen Methoden übermitteln.

Wie alle diese Methoden sind Single Page Application zu implementieren , daher ist das Rendern einer anderen Seite nicht zulässig.

Was passiert, wenn die Bedingung erfüllt ist und das Rendern einer anderen Seite angefordert wird?

Das Modul, das die API aufgerufen hat, wartet auf eine Antwort im Browser, um eine Antwort von der API zu erhalten, aber Ihre API versucht, eine andere HTML-Seite zu laden, die der Browser verbietet, und daher werden Sie niemals über einen Ajax-Aufruf gerendert.

Wie geht das?

Es gibt zwei Auswege:

  1. Einzelseitenanwendung:Mit JavaScript-Frameworks wie AngularJs hilft Ihnen ReactJs, indem es nur HTML-Vorlagen und nicht die ganze Seite ändert.

Mit Ajax können Sie dies tun:

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

Serverseitiger Code Ich gehe davon aus, dass Sie express.js und Body-Parser verwenden

app.post('/addName', (req, res) => {
    //Insert into db
    var body = req.body;
    res.send({
    fName: body.FName,
    lName: body.LName
    });
});
  1. Verwenden Sie form Submit-Methode:Mit dieser Methode können Sie die Seite rendern, aber Sie können keine Antwort an dieselbe Seite zurücksenden, d. h.

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