jQuery post () с сериализацией и дополнительными данными


147

Я пытаюсь выяснить, возможно ли опубликовать serialize()и другие данные, которые находятся за пределами формы.

Вот то, что я думал, будет работать, но это только отправляет, 'wordlist'а не данные формы.

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

У кого-нибудь есть идеи?

Ответы:


329

Вы можете использовать serializeArray [документы] и добавить дополнительные данные:

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 () производит [{имя1: 'значение1'}, {имя2: 'значение2'}]. Если у вас есть объект data {name3: 'value3', name4: 'value4'} и вставьте его в массив из serializeArray (), вы получите [{name1: 'value1'}, {name2: 'value2'}, { name3: 'value3', name4: 'value4'}]. Последний объект в массиве недействителен, и вы не получите результат.
Гудрадайн

" serializeArray()производить [{name1: 'value1'}, {name2: 'value2'}]". Нет, это не так: jsfiddle.net/akyz1Lcy
Феликс Клинг

4

В новой версии jquery, можно сделать это с помощью следующих шагов:

  • получить массив параметров через 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. Где ты это взял?
Джерем Причинение

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 и передал объект с переменной post как «name», а значение как «value»!

Надеюсь это поможет.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.