$ (this) .serialize () - Nasıl değer eklenir?


108

şu anda aşağıdakilere sahibim:

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

Bu iyi çalışıyor, ancak verilere bir değer eklemek istiyorum, bu yüzden denedim

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

Ancak bu doğru gönderilmedi. Bir öğeyi serileştirme dizesine nasıl ekleyebileceğiniz hakkında bir fikriniz var mı? Bu, forma özgü olmayan genel bir sayfa değişkenidir.


"Doğru gönderilmedi" nin ne anlama geldiğini açıklayabilir misin? Ne oldu? Sunucu ne aldı?
matt b

6
Olması gerekmiyor '&NonFormValue=' + NonFormValuemu?
Wesley Murch

Yanıtlar:


104

Onun yerine

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

muhtemelen istiyorsun

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

NonFormValueHerhangi bir özel karakter içeriyorsa değerini URL kodlamasına dikkat etmelisiniz .


1
özel karakterlerin olmamasını encodeURIComponentsağlamak için kullanınNonFormValue
Yahya Uddin

199

Matt b'nin cevabı işe yarayacak olsa da .serializeArray(), form verilerinden bir dizi almak, onu değiştirmek ve jQuery.param()onu url ile kodlanmış bir forma dönüştürmek için de kullanabilirsiniz . Bu şekilde jQuery, fazladan verilerinizin serileştirilmesini sizin için halleder.

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

14
Bu kesinlikle en iyi seçenektir - serileştirmeyi tamamen jQuery'ye bırakmak ve aynı zamanda formdan alınanlara yeni değerler ekleme yeteneğine sahip olmak.
jcsanyi

5
Bunu yapmanın en iyi yolu bu, dizelerle oynamak yok
Brett Gregson

Kabul edilen cevap bu olmalıdır. Temiz ve doğru yol
Mike Aron

7

öncelikle olmamalı

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

olmak

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

ve ikincisi kullanabilirsiniz

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

veya eylem zaten herhangi bir parametre içeriyorsa

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

İkinci cevabınız, sorunun sorulduğu şeyle aynı etkiye sahip olmayacaktır; NonFormValuePOST ile gönderilen verilerde değil, URL parametresi olarak gönderilir. Bu, a) sunucu tarafında çalışan her ne olursa olsun POST yapılmasını bekliyorsa (örneğin Django request.POSTyerine kullanmak request.REQUEST) veya b) NonFormValuegüvenlik nedenleriyle veya bu nedenle URL çubuğunda veya geçmişte görünmemesi gereken bir şeyse bu ideal olmayabilir. geçici bir değerdir.
Leigh Brenecki

6

Önce öğeyi ekleyin ve ardından serileştirin:

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

1
Benim için de çalışmadı. Nesneyi genişletmesine rağmen beklendiği gibi çalışmadı.
punitcse

5

Unutma, her zaman yapabileceğini unutma:

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

gerçek formunuzda, duruma bağlı olarak kodunuz için daha iyi olabilir.


2

Beğenebiliriz:

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

Örneğin:

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

Form verilerini işlemek için fazladan bir işlev yazabilirsiniz ve formda olmayan verilerinizi formdaki veri değeri olarak eklemelisiniz. Örneğe bakın:

<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>

Sonra bu jquery'yi form işleme için ekleyin

<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

bu daha iyi:

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

Lütfen bunun neden daha iyi bir yaklaşım olduğuna dair daha ayrıntılı bir açıklama ekleyin.
Mark

bir satır kod ve daha fazla parametreler için json nesnesini kullanabilirsiniz.
eugene
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.