Wie kann ich AJAX verwenden, um drucken Sie Daten, die innerhalb eines div?

Habe ich zwei Dateien. Eine Datei namens index.php und eine weitere Datei namens process.php.

Ich habe ein Formular, das unterwirft process.php in index.php:

<form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress">
 <table>
     <tr class="element">
          <td><label>Address</label></td>
          <td class="input"><input type="text" name="address" /></td>
     </tr>
 </table>


 <input type="submit" id="submit" value="Submit"/>


 </form>
 <div class="done"></div>

Ich habe auch ein Prozess, in process.php echo einige Daten basierend auf der Eingabe. Wie würde ich in der Lage sein, um AJAX verwenden, um das Formular Absenden ohne die Seite zu verlassen?

Ist es etwas wie:

$.ajax({
        url: "process.php", 
        type: "GET",
        data: data,     
        cache: false,
        success: function (html) {
            $('.done').fadeIn('slow');
        }
 });

Welcher Seite würde ich den obigen code auf, ob es richtig war?
Auch, wie ändere ich den obigen code zu sagen, was die process.php ausgegeben? Zum Beispiel, wenn ich echo "Hallo" auf process.php, wie mache ich, dass es in der getan div?

Ich habe gesehen, viele Antworten über AJAX, aber Sie alle verlassen sich auf Daten, die vor-gemacht, wie APIs. Ich muss eine Datenbank-Abfrage und holt sich die Daten, abhängig von der eingegeben Adresse zu und drucken die Daten aus.

$('.getan').html('Hallo').fadeIn('slow'); (oder) $('.getan').html(html).fadeIn('slow');
Setzen Sie die js-Schnipsel in index.php und mit dem zweiten Beispiel oben im Kommentar zur Ausgabe der Reaktion
Also, wenn meine php-Datei ausgegeben "3rfhd" nachdem ich eine MYSQL-query ('.getan').html(html).fadeIn('slow'); zeigen würde "3rfhd"? Ich benutzte es vor und dachte, es zeigt nur, was im inneren des div, die zuvor ausgeblendet.

InformationsquelleAutor AnimalTesting | 2014-04-08

3

Müssen Sie sammeln die Daten in der form, so dass Sie senden können Sie den Prozess-Seite, und Sie müssen ausführen von code beim Absenden des Formulars (und Abbrechen des Standard-Formulars)
```
$('#checkaddress').on('submit', function(e){
    //get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = $(this).serialize();

    $.ajax({
        url: "process.php", 
        type: "GET",
        data: dataToPassToAjax,     
        cache: false,
        success: function (resultHtml) {
            //add the returned data to the .done element
            $('.done').html( resultHtml ).fadeIn('slow');
          }
    });

  //cancel the default form submit
  return false;
});
```
[update]

Wenn Sie die Daten ändern, bevor Sie Sie abgeben, müssen Sie manuell die Parameter zu übergeben, um die ajax -
```
$('#checkaddress').on('submit', function(e){
    //get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = {};
    var address = $('input[name="address"]', this).val();

    //alter address here
    address = 'something else';

    dataToPassToAjax.address = address;

    $.ajax({
        url: "process.php", 
        type: "GET",
        data: dataToPassToAjax,     
        cache: false,
        success: function (resultHtml ) {
            //add the returned data to the .done element
            $('.done').html(resultHtml ).fadeIn('slow');
          }
    });

  //cancel the default form submit
  return false;
});
```
- OP kann auch möchten, Lesen Sie die Unterschied zwischen false zurück, und die preventDefault()
- Hmm, ich habe Mühe zu verstehen, warum Sie die var data = $(this).serialize();, kann ich das nicht auch tun var address= $('input[address=address]');; warum muss ich, um es zu serialisieren. Ebenfalls funktioniert das abrufen der Daten aus der process.php die Datei selbst echo-Daten?
- behandeln Sie die url-Codierung und behandelt auch mehrere input-Elemente im Formular. In Bezug auf das Ergebnis des ajax, der html argument haben Sie in der success Funktion ist alles enthalten, was zurückgegeben wird, von der process.php Seite (tun, wie anzeigen der Quelle auf der process.php).
- aka G. Petrioli, So würde ich Sie nicht haben, um jede variable manuell mit serialisieren? Wenn das so ist, wenn die Eingabe wurde der name "Adresse" würde die js-name auch "Adresse"? Auch was ist der Unterschied zwischen $('.done').html(html). und $('.done).replaceWith('<div class="done">'.html(html).'</div>'); oder würde der zweite code auch funktioniert?
- Sie zweite code nicht funktionieren würde, aufgrund der . verwenden Sie für die Verkettung von strings. Das ist php und nicht javascript. .html() wie in meinem Beispiel, ist eine jquery-Methode, ersetzt den html-Inhalt eines Elements mit dem, was Sie an ihn übergeben (api.jquery.com/html/#html2)
- aka G. Petrioli Aber sagen, ich will zu ändern, die Eingabe-variable aus dem Formular-Adresse. Wie würde ich das tun, in anderen Worten, welche Variablen ich verwenden, wenn ich nicht erklären, dass ein in der Anfang?
- nicht sicher, ob ich dir Folgen. Die .serialize erstellen von url-Parametern auf der Grundlage der name - Attribut des form-elements.
- Ich sehe jetzt, wenn Sie wollen, um es zu ändern, dann müssen Sie manuell die Parameter, die Sie übergeben, um den ajax-Aufruf.. Sie sind Recht.
- aka. G. Petrioli, Aber hast du nicht sagen, es "handle multiple input-Elemente in form"? Was sind die Unterschied zwischen url-paramenters und Variablen?
- Hinzugefügt ein Beispiel der manuellen Verarbeitung der Eingabe-Elemente. .serialize wird erstellen Sie die richtige data zu passieren, um den ajax-Aufruf für alle - Elementen in der form, aber tun Sie es auf Ihre aktuellen Werte. Wenn Sie möchten, um Sie zu ändern, die Sie haben, es zu tun eins nach dem anderen und fügen Sie Sie dann auf ein Objekt übergeben, um den ajax-Aufruf ..
- Hast du var data = {}; zum speichern der Daten aus process.php oder war es einzig und allein dem Zweck speichern, um die neue Adresse variable?
- data = {} war einzig und allein, um die Adresse speichern, denn wenn du an ein javascript-Objekt, um die data argument der ajax-es wird die url-Kodierung auf seine eigenen..
- Ok, vielen Dank. Was bedeutet data: data, tun in ajax?
- die linke data ist der name des Arguments und das Recht data ist die variable, die wir erstellt haben, in der höheren Funktion (das Objekt mit der Adresse). Ich habe gerade den Namen im code, um es ein bisschen mehr intuitiv..
- Oh, ok. Wenn ich versuche einige Daten durch process.php und echo "Hallo", es funktioniert nicht. Auch, wenn ich Besuch process.php es zeigt eine leere Seite für einige Grund.
- gut, dann ist das problem mit der process.php Datei.. sollte man eine Frage stellen über es (was Sie versuchen zu zeigen, und was es zeigt..)
- Ich habe den Fehler behoben. In meinem html-code, den ich habe eigentlich zwei divs mit der Klasse gemacht. Brauche ich zum erstellen einer anderen Klasse unterscheiden sich die beiden? Ich habe alles, was Sie haben, und es funktioniert immer noch nicht.
- wenn Sie zwei Elemente mit der Klasse done es wird sich ändern, den html-Code in beide von Ihnen, und auch fade-in beiden.. wenn es überhaupt nicht funktioniert dann liegt das problem woanders.. bitte posten Sie eine live-demo..
- hier ist eine demo, in der der obige code jsfiddle.net/sUm6D (kleine änderungen zu machen, arbeiten mit jsfiddle)
- Danke, habe ich behoben, indem problem, da eine der Variablen falsch waren.
- Gibt es eine Möglichkeit, wo ich herausfiltern können nur eine variable will ich in html? Zum Beispiel, wenn resultHtml zurückgegeben $don und $var, wie bekomme ich nur $don? (Würde ich in $var später)
- Sie haben, um Sie in verschiedenen div Elemente mit Ihren eigenen id und Suche im Gegenzug für Sie.
InformationsquelleAutor Gabriele Petrioli
0

Könnten Sie die jQuery form plugin: http://jquery.malsup.com/form/

Lassen Sie mich wissen, wenn Sie möchten, Beispiel-code.

InformationsquelleAutor AndersDJohnson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.