Передать всю форму как данные в функции jQuery Ajax
У меня есть функция jQuery ajax и я хотел бы отправить всю форму в качестве данных post. Мы постоянно обновляем форму, поэтому становится утомительно постоянно обновлять входные данные формы, которые должны быть отправлены в запросе.
8 ответов
есть функция, которая делает именно это:
http://api.jquery.com/serialize/
var data = $('form').serialize();
$.post('url', data);
serialize () не является хорошей идеей, если вы хотите отправить форму с методом post. Например, если вы хотите передать файл через AJAX не будет работать.
лучшее решение-сделать 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 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 для уменьшения нескольких параметров до одного ключа, разделенного запятыми (бесстыдно скопированного из комментатора ответ в потоке на месте Джона Resig):
function compress(data) {
data = data.replace(/([^&=]+=)([^&]*)(.*?)&([^&]*)/g, ",");
return /([^&=]+=).*?&/.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)
}
});
}
<form id="add-item-form">
. . .
</form>
<script>
$('#add-item-form').submit(function (event) {
event.preventDefault();
var data = $('#add-item-form').serialize();
$.post("/Item/AddItem", data, function (response) {
. . .
});
});
</script>