jQuery - Abrufen von Formularwerten für Ajax POST

73

Ich versuche, Formularwerte über AJAX in eine PHP-Datei zu posten. Wie sammle ich meine Formularwerte, um sie innerhalb des Parameters "data" zu senden?

$.ajax({
        type: "POST",
        data: "submit=1&username="+username+"&email="+email+"&password="+password+"&passconf="+passconf,
        url: "http://rt.ja.com/includes/register.php",
        success: function(data)
        {   
            //alert(data);
            $('#userError').html(data);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

HTML:

<div id="border">
  <form  action="/" id="registerSubmit">
    <div id="userError"></div>
      Username: <input type="text" name="username" id="username" size="10"/><br>
      <div id="emailError" ></div>
      Email: <input type="text" name="email" size="10" id="email"/><br>
      <div id="passError" ></div>
      Password: <input type="password" name="password" size="10" id="password"/><br>
      <div id="passConfError" ></div>
      Confirm Password: <input type="password" name="passconf" size="10" id="passconf"/><br>
      <input type="submit" name="submit" value="Register" />
  </form>
</div>

jquery ajax

— user547794
quelle

1

Sie sollten es im JSON-Format senden {"key":value, "key":value}. Ich würde vorschlagen, ein Javascript-Objekt mit Ihren Parametern als Eigenschaften zu erstellen und JSON.stringify(object)das Objekt in das JSON-Format zu konvertieren.

— Sang Suantak

@ SangSuantak, warum sollten Sie sich mit JSON-Konvertierungen beschäftigen, wenn Sie sie nicht mit den normalen Namen / Wert-Paaren benötigen würden?!

— Alexis Wilke

138

Verwenden Sie die Serialisierungsmethode:

$.ajax({
    ...
    data: $("#registerSubmit").serialize(),
    ...
})

Docs: serialize ()

— Robin
quelle

Wie erhalten Sie die Formulardaten und eine zusätzliche manuell festgelegte Variable? wie Daten: $ ("# registerSubmit"). serialize () + '& myvar = 123'? das scheint nicht so zu funktionieren, wie ich es habe

— Dss

3

Ich sehe nicht, was das nicht funktionieren würde. Wenn die Daten, die Sie anhängen möchten, komplexer sind, können Sie sie verwenden $.param. $("form").serialize() + "&" + $.param({ myvar: 123 }).

— Robin

8

Es gibt auch eine andere Methode: verwenden serializeArray. data = $("form").serializeArray(); data.push({ name: "myvar", value: 123 }); $.param(data);

— Robin

Ja, das war das Ticket, das ich letzte Nacht herausgefunden habe. Ich musste das + '&' + zwischen jedem manuell hinzufügen. Vielen Dank!

— Dss

14

$("#registerSubmit").serialize() // returns all the data in your form
$.ajax({
     type: "POST",
     url: 'your url',
     data: $("#registerSubmit").serialize(),
     success: function() {
          //success message mybe...
     }
});

— Ritchie
quelle

6

Mit der Val-Funktion können Sie Daten von Eingaben erfassen:

jQuery("#myInput1").val();

http://api.jquery.com/val/

— Headshota
quelle

5

Ja, aber Sie sollten es nicht für jedes Feld manuell tun müssen. Dafür ist Serialisieren da. Was ist, wenn Sie ein Feld hinzufügen? Sie möchten nicht Ihre js ändern müssen.

— Robin

4

var data={
 userName: $('#userName').val(),
 email: $('#email').val(),
 //add other properties similarly
}

und

$.ajax({
        type: "POST",
        url: "http://rt.ja.com/includes/register.php?submit=1",
        data: data

        success: function(html)
        {   
            //alert(html);
            $('#userError').html(html);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

Sie müssen sich um nichts anderes kümmern. jquery übernimmt die Serialisierung usw. Sie können auch den Parameter submit = 1 der Submit-Abfragezeichenfolge an das Daten-json-Objekt anhängen.

— Baz1nga
quelle

1

var username = $('#username').val();
var email= $('#email').val();
var password= $('#password').val();

— Kanishka Panamaldeniya
quelle

0

versuchen Sie es als diesen Code.

$.ajax({
        type: "POST",
        url: "http://rt.ja.com/includes/register.php?submit=1",
        data: "username="+username+"&email="+email+"&password="+password+"&passconf="+passconf,

        success: function(html)
        {   
            //alert(html);
            $('#userError').html(html);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

Ich denke, das wird definitiv funktionieren.

Sie können auch die Funktion .serialize () verwenden, um Daten über jquery Ajax zu senden.

i.e: data : $("#registerSubmit").serialize()

Vielen Dank.

— Chandresh M.
quelle