jQuery post () із серіалізацією та додатковими даними


147

Я намагаюся з’ясувати, чи можливо розміщувати serialize()та інші дані, які не є формою.

Ось що я думав, що це спрацює, але він надсилає лише 'wordlist'дані форми, а не дані.

$.post("page.php",( $('#myForm').serialize(), { 'wordlist': wordlist }));

Хтось має ідеї?

Відповіді:


329

Ви можете використовувати serializeArray [docs] та додати додаткові дані:

var data = $('#myForm').serializeArray();
data.push({name: 'wordlist', value: wordlist});

$.post("page.php", data);

11
Хм. Я думаю, що це мені подобається краще, ніж моє рішення :) Я можу почати це робити в майбутньому.
Майкл Міор

@Gudradain: Це працює чудово: jsfiddle.net/fnjncqhv . Якщо це не працює для вас, ви стикаєтеся з іншою проблемою.
Фелікс Клінг

Ні, це не так. jsfiddle.net/fnjncqhv/1 serializeArray () створює масив об'єктів, кожен об'єкт, що містить одну властивість, якщо ваш об'єкт даних містить більше 1 властивості (як у вашому прикладі), він створює недійсний об'єкт і не буде прив’язуватися до стороні сервера. Відредагуйте свою відповідь, щоб усунути проблему.
Гудрадейн

2
@Gudradain: Будь ласка, дивіться мій коментар до вашої відповіді. Ви неправі. serializeArrayне створює структури, яку ви думаєте, що це робить. Я не впевнений, що ви намагаєтесь показати зі своєю демонстрацією. Ви просто попереджуєте довжину масиву. Якщо моя демонстрація вас не переконує, перегляньте документацію .
Фелікс Клінг

1
@FelixKling Вибачте за цей невдалий момент і дякую за пояснення. Ви не зрозуміли, що вам дійсно потрібен формат {name: 'your-paramater-name', value: 'your-parameter-value'}, для кожного параметра, який ви хочете додати.
Гудрадейн


9

Альтернативне рішення, якщо вам потрібно зробити це під час завантаження файлу ajax:

var data = new FormData( $('#form')[0] ).append( 'name' , value );

АБО навіть простіше.

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

    e.preventDefault();
    var data = new FormData( this ).append('name', value );

    // ... your ajax code here ...

    return false;

});

5

Коли ви хочете додати об’єкт javascript до даних форми, ви можете використовувати наступний код

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeArray();
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        postData.push({name:key, value:data[key]});
    }
}
$.post(url, postData, function(){});

Або якщо ви додасте метод serializeObject () , ви можете зробити наступне

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeObject();
$.extend(postData, data);
$.post(url, postData, function(){});

1
Це в основному генерує масив, який виглядає так [{name: 'wordlist'}, {value: wordlist}]. Це не у форматі, який розуміє jQuery, тому я сумніваюся, що це насправді працює.
Фелікс Клінг

@FelixKling serializeArray () виробляє [{name1: 'value1'}, {name2: 'value2'}]. Якщо у вас є дані об’єкта {name3: 'value3', name4: 'value4'} і натисніть їх на масив із serializeArray (), ви отримаєте [{name1: 'value1'}, {name2: 'value2'}, { name3: 'value3', name4: 'value4'}]. Останній об’єкт у масиві недійсний, і ви не отримаєте результат.
Гудрадейн

" serializeArray()виробляти [{name1: 'value1'}, {name2: 'value2'}]". Ні, це не так: jsfiddle.net/akyz1Lcy
Фелікс Клінг

4

У новій версії jquery це можна зробити за допомогою наступних кроків:

  • отримати масив param через serializeArray()
  • виклик push()або подібні методи для додавання додаткових параметрів до масиву,
  • виклик, $.param(arr)щоб отримати серіалізовану рядок, який може бути використаний як параметр jquery ajax data.

Приклад коду:

var paramArr = $("#loginForm").serializeArray();
paramArr.push( {name:'size', value:7} );
$.post("rest/account/login", $.param(paramArr), function(result) {
    // ...
}

3
$.ajax({    
    type: 'POST',  
    url: 'test.php',  
    data:$("#Test-form").serialize(),  
    dataType:'json',
     beforeSend:function(xhr, settings){
     settings.data += '&moreinfo=MoreData';
     },
    success:function(data){
            //  json response  
    },
    error: function(data) { 
        // if error occured
    }
    });

2

Ви можете мати форму, що містить додаткові дані у вигляді прихованих полів, які ви встановили б перед тим, як надсилати запит AJAX до відповідних значень.

Інша можливість полягає у використанні цього маленького коштовного каменю, щоб серіалізувати вашу форму в об’єкт javascript (замість рядка) та додати відсутні дані:

var data = $('#myForm').serializeObject();
// now add some additional stuff
data['wordlist'] = wordlist;
$.post('/page.php', data);

Не існує жодної існуючої функції serializeObject. Де ти це взяв?
Jereme Причини

1

Ви можете використовувати це

var data = $("#myForm").serialize();
data += '&moreinfo='+JSON.stringify(wordlist);

0

Мені подобається зберігати предмети як об'єкти і не робити ніяких шалених змін. Ось мій шлях

var post_vars = $('#my-form').serializeArray();
$.ajax({
  url: '//site.com/script.php',
  method: 'POST',
  data: post_vars,
  complete: function() {
    $.ajax({
      url: '//site.com/script2.php',
      method: 'POST',
      data: post_vars.concat({
        name: 'EXTRA_VAR',
        value: 'WOW THIS WORKS!'
      })
    });
  }
});

якщо ви не бачите зверху, я використав функцію .concat і передав об'єкт зі змінною пост як "ім'я" і значенням як "значення"!

Сподіваюся, це допомагає.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.