Senden von Formular über AJAX jedes Mal geklickt

Question

Ich möchte meine Formulare senden, indem Sie auf jede Schaltfläche senden klicken.

Meine Frage: Wie kann ich jedes Formular senden und jedes Ergebnis separat angeben. Ich habe den folgenden Code getestet, aber es keine Sache schicken, und es gibt kein Ergebnis in div mit .divs:

$("form").on('submit',function(e) { 
 
    var url = 'http://seller.ir/test' 
 
    $.ajax({ 
 
    type: "POST", 
 
    url: url, 
 
    data: $(this).serialize(), 
 
    success: function(data) { 
 
     $(this).find('.divs').empty 
 
     $(this).find('.divs').html(data) 
 

 
    } 
 
    }); 
 
    e.preventDefault(); 
 
});

form{ 
 
\t width:100px; 
 
\t border:1px solid blue; 
 
\t height:50px; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="divs"> 
 
<form> 
 
<button id="done"type="submit">done</button> 
 
</form> 
 
</div> 
 
<div class="divs"> 
 
<form> 
 
<button id="done" type="submit">done</button> 
 
</form> 
 
</div> 
 
<div class="divs"> 
 
<form> 
 
<button id="done" type="submit">done</button> 
 
</form> 
 
</div>

Answer 1

Das einzige Problem mit Ihrem Code ist, dass Ihre Formulare don‘ t haben .divs als ihre Nachkommen. Bitte lesen Sie die Dokumentation von .find().

Die Abkömmlinge jedes Elements im aktuellen Satz übereinstimmender Elemente abrufen, gefiltert durch einen Selektor, ein jQuery-Objekt oder ein Element.

ändern HTML

<form> 
    <button id="done"type="submit">done</button> 
    <div class="divs"></div> 
</form> 
<form> 
    <button id="done"type="submit">done</button> 
    <div class="divs"></div> 
</form> 
<form> 
    <button id="done"type="submit">done</button> 
    <div class="divs"></div> 
</form> 

Nun, wenn Sie die Tastegetan drücken, wird das entsprechende Formular auslösen seine submit Veranstaltung, die von jQuery behandelt werden. Wie andere Antworten darauf hingewiesen haben, müssen IDs für verschiedene Elemente für eine HTML-Seite eindeutig sein.

Wenn Sie nur den Inhalt der inneren div ersetzen, ist diese Zeile ausreichend.

$(this).find('.divs').html(data); 

Sie müssen das div nicht zuerst leeren.