$ (this) .serialize () - Jak dodać wartość?


108

obecnie posiadam:

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
});

Działa to dobrze, jednak chciałbym dodać wartość do danych, więc spróbowałem

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize() + '&=NonFormValue' + NonFormValue,
});

Ale to nie zostało poprawnie opublikowane. Jakieś pomysły na to, jak dodać element do ciągu serializacji? To jest globalna zmienna strony, która nie jest specyficzna dla formularza.


Czy możesz wyjaśnić, co oznacza „ta wiadomość nie została opublikowana poprawnie”? Co się stało? Co odebrał serwer?
Matt b

6
Nie powinno tak być '&NonFormValue=' + NonFormValue?
Wesley Murch

Odpowiedzi:


104

Zamiast

 data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

prawdopodobnie chcesz

 data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

Należy uważać, aby zakodować w adresie URL wartość, NonFormValuejeśli może ona zawierać znaki specjalne.


1
użyj, encodeURIComponentaby upewnić się, że NonFormValuenie ma żadnych znaków specjalnych
Yahya Uddin

199

Chociaż odpowiedź matta b zadziała, możesz również użyć jej .serializeArray()do pobrania tablicy z danych formularza, zmodyfikowania jej i użycia jQuery.param()do konwersji na postać zakodowaną w postaci adresu URL. W ten sposób jQuery obsługuje serializację dodatkowych danych za Ciebie.

var data = $(this).serializeArray(); // convert form to array
data.push({name: "NonFormValue", value: NonFormValue});
$.ajax({
    type: 'POST',
    url: this.action,
    data: $.param(data),
});

14
Jest to zdecydowanie najlepsza opcja - pozostawienie serializacji całkowicie jQuery, przy jednoczesnym zachowaniu możliwości dodawania nowych wartości do tych pobranych z formularza.
jcsanyi

5
To najlepszy sposób na zrobienie tego, bez grania na strunach
Brett Gregson

To powinna być akceptowana odpowiedź. Czysto i we właściwy sposób
Mike Aron

7

po pierwsze nie powinien

data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

być

data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

a po drugie możesz użyć

url: this.action + '?NonFormValue=' + NonFormValue,

lub jeśli akcja zawiera już jakiekolwiek parametry

url: this.action + '&NonFormValue=' + NonFormValue,

Twoja druga odpowiedź nie miałaby takiego samego efektu, jak to, o co pytano; NonFormValuezostanie wysłany jako parametr adresu URL, a nie w opublikowanych danych. Może to nie być idealne, jeśli a) cokolwiek działa po stronie serwera, oczekuje, że zostanie wysłane (np. Użycie request.POSTzamiast request.REQUESTw Django), lub b) NonFormValuejest czymś, co nie powinno pojawiać się na pasku adresu URL ani w historii ani ze względów bezpieczeństwa, ani z powodu jest to wartość przejściowa.
Leigh Brenecki

6

Najpierw dodaj element, a następnie serializuj:

$.ajax({
    type: 'POST',
    url: this.action,
    data: $.extend($(this), {'NonFormValue': NonFormValue}).serialize()
});

1
U mnie też nie działa. Chociaż wydłuża obiekt, ale nie działa zgodnie z oczekiwaniami.
punitcse

5

Nie zapominaj, że zawsze możesz:

<input type="hidden" name="NonFormName" value="NonFormValue" />

w twojej rzeczywistej formie, co może być lepsze dla twojego kodu w zależności od przypadku.


2

Możemy zrobić:

data = $form.serialize() + "&foo=bar";

Na przykład:

var userData = localStorage.getItem("userFormSerializeData");
var userId = localStorage.getItem("userId");

$.ajax({
    type: "POST",
    url: postUrl,
    data: $(form).serialize() + "&" + userData + "&userId=" + userId,
    dataType: 'json',
    success: function (response) {
        //do something
    }
});

0

Możesz napisać dodatkową funkcję do przetwarzania danych formularza i powinieneś dodać swoje dane nonform jako wartość danych w formularzu. Zobacz przykład:

<form method="POST" id="add-form">
    <div class="form-group required ">
        <label for="key">Enter key</label>
        <input type="text" name="key" id="key"  data-nonformdata="hai"/>
    </div>
    <div class="form-group required ">
        <label for="name">Ente Name</label>
        <input type="text" name="name" id="name"  data-nonformdata="hello"/>
    </div>
    <input type="submit" id="add-formdata-btn" value="submit">
</form>

Następnie dodaj to jquery do przetwarzania formularza

<script>
$(document).onready(function(){
    $('#add-form').submit(function(event){
        event.preventDefault();
        var formData = $("form").serializeArray();
        formData = processFormData(formData);
        // write further code here---->
    });
});
processFormData(formData)
{
    var data = formData;
    data.forEach(function(object){
        $('#add-form input').each(function(){
            if(this.name == object.name){
                var nonformData = $(this).data("nonformdata");
                formData.push({name:this.name,value:nonformData});
            }
        });
    });
    return formData;
}


0

to lepiej:

data: [$(this).serialize(),$.param({NonFormValue: NonFormValue})].join('&')

Dodaj bardziej szczegółowy opis, dlaczego jest to lepsze podejście.
Mark

jeden wiersz kodu i możesz użyć obiektu json dla większej liczby parametrów.
Eugene
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.