У меня есть форма и обработчик отправки в jQuery.
Когда пользователь отправляет форму, я хочу изменить (добавить) некоторые параметры в запрос POST, прежде чем он будет отправлен от клиента к серверу.
то есть.
На данный момент, похоже, мои единственные варианты - использовать $.post() или $('form').append('<input type="hidden" name=... value=...');
Спасибо за любую помощь.
Изменить: я уже прикреплял обработчик отправки к форме; Я пытаюсь отредактировать почтовые ящики между пользователем, нажав кнопку отправки, и запрос, отправленный на сервер.
Используйте функцию submit() в форме для создания обратного вызова. Если функция возвращает true, форма будет отправлена; если false, форма не будет публиковать.
$('#theForm').submit(function() {
$("#field1").val(newValue1);
$("#field2").val(newValue2);
$(this).append(newFormField);
return true;
});и др.
Высокий уровень:
Когда форма отправляется изначально, это последняя операция, которую выполняет браузер, и выполняется за пределами интерпретатора engine/javascript.
Любые попытки перехвата реального запроса POST или GET с помощью JavaScript невозможны, поскольку этот традиционный веб-запрос возникает исключительно между движком браузера и сетевой подсистемой.
Современное решение:
Для веб-разработчиков становится все более популярным отправлять данные формы с помощью XMLHttpRequest - API веб-браузера, который позволяет встроенному разработчику JavaScript получать доступ к сетевой подсистеме браузера. This is commonly referred to as Ajax
Простое, но общее использование этого будет выглядеть примерно так:
<html>
<form id="myForm" onsubmit="processForm()">
<input type="text" name="first_name"/>
<input type="text" name="last_name"/>
<input type="submit" value="Submit">
</form>
<!--Using jQuery and Ajax-->
<script type="text/javascript">
/**
* Function is responsible for gathering the form input data,
* adding additional values to the list, and POSTing it to the
* server via Ajax.
*/
function processForm() {
//Retreive the data from the form:
var data = $('#myForm').serializeArray();
//Add in additional data to the original form data:
data.push(
{name: 'age', value: 25},
{name: 'sex', value: 'M'},
{name: 'weight', value: 200}
);
//Submit the form via Ajax POST request:
$.ajax({
type: 'POST',
url: 'myFormProcessor.php',
data: data,
dataType: 'json'
}).done(function(data) {
//The code below is executed asynchronously,
//meaning that it does not execute until the
//Ajax request has finished, and the response has been loaded.
//This code may, and probably will, load *after* any code that
//that is defined outside of it.
alert("Thanks for the submission!");
console.log("Response Data" +data); //Log the server response to console
});
alert("Does this alert appear first or second?");
}
</script>
</html>
Родной подход: До появления XMLHttpRequest одним из решений было бы просто добавить любые дополнительные данные формы непосредственно в документ.
Используя ту же форму, что и выше, метод добавления jQuery может выглядеть так:
<html>
<form action="myFormProcessor.php" method="POST" id="myForm" onsubmit="return processForm()">
<input type="text" name="first_name"/>
<input type="text" name="last_name"/>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
/**
* Function is responsible for adding in additional POST values
* by appending <input> nodes directly into the form.
* @return bool - Returns true upon completion to submit the form
*/
function processForm() {
$('<input>').attr('type', 'hidden').attr('name', 'age').attr('value', 25).appendTo('#myForm');
$('<input>').attr('type', 'hidden').attr('name', 'sex').attr('value', 'M').appendTo('#myForm');
$('<input>').attr('type', 'hidden').attr('name', 'weight').attr('value', 200).appendTo('#myForm');
return true; //Submit the form now
//Alternatively you can return false to NOT submit the form.
}
</script>
</html>
Я не думаю, что вы можете изменить POST файлы таким образом. Когда обработчик submit запускает там хеш данных формы, которые действительно существуют, которые вы можете добавить или изменить. Я думаю, что вы правы - ваши собственные варианты $.post() сами (что я рекомендовал) или добавление скрытых входов в форму (есть накладные расходы на модификацию DOM, которые вам действительно не нужны).
Я работаю над этим вопросом в течение одного дня, и я придумал хорошее решение:
вы можете использовать JQuery.clone(), чтобы создать копию формы, которую вы хотите отправить. Затем вы можете внести изменения в копию и, наконец, отправить копию.
Прикрепите обработчик submit() к форме.
$('form#myForm').submit(myPostHandlingFunction);
Затем отправьте/сделайте сообщение из своей функции. Проще всего было бы просто заполнить пару скрытых входов в форме, а затем вернуть true, чтобы позволить submit, если все выглядит правильно.
Вы можете подключить событие нажатия кнопки отправки и выполнить свою обработку. Для пар ключ/значение вы можете попробовать скрытый элемент формы.
$("#frm").submit(function (e) {
e.preventDefault();
form = document.getElementById("frm"); //$("#frm")
$.each(form.elements, function (i, el) {
el.name = your_new_name;
el.value = your_new_value;
//... //el.type, el.id ...
});
form.submit();
return true;
});