$ (this) .serialize () - จะเพิ่มค่าได้อย่างไร?

ตอนนี้ฉันมีสิ่งต่อไปนี้:

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

วิธีนี้ใช้งานได้ดี แต่ฉันต้องการเพิ่มมูลค่าให้กับข้อมูลดังนั้นฉันจึงลอง

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

แต่นั่นไม่ได้โพสต์อย่างถูกต้อง มีแนวคิดเกี่ยวกับวิธีเพิ่มรายการลงในสตริงซีเรียลไลซ์หรือไม่? นี่คือตัวแปรหน้าส่วนกลางที่ไม่เจาะจงรูปแบบ

แทน

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

คุณอาจต้องการ

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

คุณควรระมัดระวังในการเข้ารหัส URL ค่าNonFormValueว่าอาจมีอักขระพิเศษหรือไม่

แม้ว่าคำตอบของ matt b จะใช้งานได้ แต่คุณยังสามารถใช้.serializeArray()เพื่อรับอาร์เรย์จากข้อมูลฟอร์มแก้ไขและใช้jQuery.param()เพื่อแปลงเป็นรูปแบบที่เข้ารหัส URL ได้ ด้วยวิธีนี้ jQuery จะจัดการซีเรียลไลเซชั่นของข้อมูลเพิ่มเติมให้คุณ

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

ประการแรกไม่ควร

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

เป็น

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

และประการที่สองคุณสามารถใช้ได้

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

หรือหากการดำเนินการมีพารามิเตอร์อยู่แล้ว

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

เพิ่มรายการก่อนแล้วจึงทำให้เป็นอนุกรม:

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

อย่าลืมว่าคุณสามารถทำได้เสมอ:

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

ในรูปแบบจริงของคุณซึ่งอาจดีกว่าสำหรับรหัสของคุณขึ้นอยู่กับกรณี

เราสามารถทำได้เช่น:

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

ตัวอย่างเช่น:

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
    }
});

คุณสามารถเขียนฟังก์ชันพิเศษเพื่อประมวลผลข้อมูลในฟอร์มและคุณควรเพิ่มข้อมูลที่ไม่ใช่รูปแบบของคุณเป็นค่าข้อมูลในแบบฟอร์มดูตัวอย่าง:

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

จากนั้นเพิ่ม jquery นี้สำหรับการประมวลผลแบบฟอร์ม

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

ดีกว่านี้:

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