ส่งแบบฟอร์มทั้งหมดเป็นข้อมูลในฟังก์ชัน jQuery Ajax

ฉันมีฟังก์ชั่น jQuery ajax และต้องการส่งแบบฟอร์มทั้งหมดเป็นข้อมูลโพสต์ เราอัปเดตฟอร์มอย่างต่อเนื่องดังนั้นจึงเป็นเรื่องน่าเบื่อที่จะต้องอัปเดตฟอร์มที่ควรส่งในคำขอ

มีฟังก์ชั่นที่ทำสิ่งนี้อย่างแน่นอน:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

ทำให้เป็นอันดับ () ไม่ใช่ความคิดที่ดีถ้าคุณต้องการส่งแบบฟอร์มด้วยวิธีการโพสต์ ตัวอย่างเช่นถ้าคุณต้องการส่งไฟล์ผ่าน ajax มันจะไม่ทำงาน

สมมติว่าเรามีฟอร์มที่มี ID นี้: "myform"

ทางออกที่ดีกว่าคือการสร้าง FormData และส่ง:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

โดยทั่วไปใช้serialize()กับองค์ประกอบแบบฟอร์ม

โปรดระลึกไว้ว่าตัวเลือก <select> หลายรายการนั้นต่อเนื่องกันภายใต้คีย์เดียวกันเช่น

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

จะส่งผลให้เกิดสตริงการสืบค้นที่มีการเกิดขึ้นหลายครั้งของพารามิเตอร์การสืบค้นเดียวกัน:

[path]?foo=1&foo=2&foo=3&someotherparams...

ซึ่งอาจไม่ใช่สิ่งที่คุณต้องการในแบ็กเอนด์

ฉันใช้รหัส JS นี้เพื่อลดพารามิเตอร์หลายตัวให้เป็นคีย์เดี่ยวที่คั่นด้วยเครื่องหมายจุลภาค (คัดลอกอย่างไร้ยางอายจากการตอบสนองของผู้แสดงความคิดเห็นในเธรดที่ตำแหน่งของ John Resig):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

ซึ่งเปลี่ยนข้างต้นเป็น:

[path]?foo=1,2,3&someotherparams...

ในรหัส JS ของคุณคุณจะเรียกมันว่า:

var inputs = compress($("#your-form").serialize());

หวังว่าจะช่วย

ใช้

ทำให้เป็นอันดับ ()

var str = $("form").serialize();

ทำให้ฟอร์มเป็นอนุกรมเป็นสตริงแบบสอบถามซึ่งสามารถส่งไปยังเซิร์ฟเวอร์ในคำขอ Ajax

ตัวเลือก jQuery ที่ดีที่จะทำเช่นนี้คือผ่านFormData วิธีนี้ยังเหมาะสมเมื่อส่งไฟล์ผ่านแบบฟอร์ม!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

ฟังก์ชั่นส่งของคุณใน jQuery จะมีลักษณะเช่นนี้:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

เพื่อเพิ่มข้อมูลลงในแบบฟอร์มของคุณคุณสามารถใช้อินพุตที่ซ่อนอยู่ในแบบฟอร์มของคุณหรือเพิ่มข้อมูลได้ทันที:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

คุณต้องโพสต์ข้อมูล และการใช้พารามิเตอร์ชุดฟังก์ชั่น jquery ajax นี่คือตัวอย่าง

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

โซลูชันอื่น ๆ ใช้ไม่ได้สำหรับฉัน อาจเป็น DOCTYPE เก่าในโครงการที่ฉันกำลังทำงานเพื่อป้องกันตัวเลือก HTML5

ทางออกของฉัน:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}