Ajax Post-Daten von Form zu senden

js Körper Parser auszudrücken ich Tring bin Formulardaten an den Knoten js über Ajax zu schicken,
ich mit Körper-Parser auf dem Knoten express bin mit js
Aber ich bin immer in req undefiniert. KörperAjax Post-Daten von Form zu senden

Ich suchte alle im Netz und versuchte viele Dinge und nichts funktionierte für mich Bitte helfen Sie mir mit der richtigen Art und Weise, dies zu tun.

| * | Html Code:

<html lang="en"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <title>Add</title> 
</head> 
<body> 

    <h1>Welcome to Website </h1> 
    <form id="addUserForm"> 
     <h3> Enter the your details : </h3> 
     Name :<br><input type="text" name="nameView"><br><br> 
     Email :<br><input type="email" name="mailView"><br><br> 
     Mobile :<br><input type="number" name="mobileView"><br><br> 
     <input type="submit" value="Submit"> 
    </form>

| * | Ajax Code:

<script> 
     $(document).ready(function() 
     { 
      $('#addUserForm').submit(function() 
      { 
       var formDataVar = new FormData($(this)[0]); 

       console.log(formDataVar); 
       $.ajax({ 
        url: '/addUserFormSubmit', 
        type:'POST', 
        data: formDataVar, 
        dataType: 'json', 
        contentType: false, 
        processData: false, 
       }).done(function(ResJryVar) 
       { 
        console.log(ResJryVar); 
       }); 
      }) 
     }); 

    </script> 
</body> 

</html>

| * | Ich habe auch versucht:

var formDataVar = new FormData(); 
formDataVar.append('nameView', input.files[0]); 
formDataVar.append('mailView', input.files[1]); 
formDataVar.append('mobileView', input.files[2]);

und

var formDataVar = {}; 
$.each($('#addUserForm').serializeArray(), function(i, field) 
{ 
    formDataVar[field.name] = field.value; 
});

| * | Knoten Js-Code:

var express = require("express"); 
var bodyParser = require("body-parser"); 
var app = express(); 

app.listen(8888,function() 
{ 
    console.log("Server Started and Running ..."); 
}); 

app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 

app.get('/',addUserFormFnc); 
app.post('/addUserFormSubmit',addUserSubmitFnc); 

function addUserFormFnc(req, res) 
{ 
    res.sendFile('addUser.html', {root: __dirname }); 
} 

function addUserSubmitFnc(req, res) 
{ 
    console.log("Data Received : "); 
    var userObjVar = 
    { 
     nameView: req.body.nameView, 
     mailView: req.body.mailView, 
     mobileView: req.body.mobileView 
    }; 
    console.log(userObjVar); 
    res.send(userObjVar); 

}

Quelle

2017-09-22 Sujay U N

Wenn Sie URL-codierte Daten haben, sollte es auf req.body, nicht req.data verfügbar sein. Für mehrteilige/Formulardaten, überprüfen Sie das multer Middleware-Paket. – djfdev

Sorry bearbeitet meine Frage. sein Wunschkörper. Ich benutze nur Form. action = '/ addUserFormSubmit' funktioniert. aber wenn ich von ajax sende, wird es nicht funktionieren –

Der Körper-Parser-Bibliothek keine Daten verarbeiten verschlüsselt mit multipart/form-data. Wenn Sie diese Art von Daten senden möchten, sollten Sie etwas wie die multer Middleware verwenden.

Aber in Ihrem Fall, ich denke, Sie können wegkommen, ohne die FormData Schnittstelle zu verwenden. Sie können Ihren Browsercode einfach wie folgt neu schreiben:

const $form = $('#addUserForm') 

$form.on('submit', submitHandler) 

function submitHandler (e) { 
    e.preventDefault() 

    $.ajax({ 
    url: '/addUserFormSubmit', 
    type:'POST', 
    data: $form.serialize() 
    }).done(response => { 
    console.log(response) 
    }) 
}

Quelle

2017-09-22 21:16:58 djfdev

Können Sie erklären, wie Multer nur für Felder zu verwenden. Die Dokumentation erläutert nur Dateien. –

Hier ist ein voll funktionsfähiges Beispiel https://gist.github.com/djfdev/750f2255e2f6f72b2ca5e0636f13d990 – djfdev

Nach den mehr Dokumente, werden alle Textfelder als Eigenschaften von 'req.body' verfügbar sein. Aber Sie sollten diese Bibliothek nicht erneut verwenden, wenn Sie keine Dateien senden. – djfdev

Ajax Post-Daten von Form zu senden

Antwort

Verwandte Themen