[英]jQuery AJAX submit form
我有一个名为orderproductForm
的表单和未定义数量的输入。
我想做某种 jQuery.get 或 ajax 或类似的东西,通过 Ajax 调用页面,并发送表单orderproductForm
所有输入。
我想一种方法是做类似的事情
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
但是我并不完全知道所有的表单输入。 是否有一个特性、功能或某些东西可以只发送所有表单输入?
这是一个简单的参考:
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
您可以使用Ajax 表单插件中的 ajaxForm/ajaxSubmit 函数或 jQuery 序列化函数。
Ajax 表单:
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
要么
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
ajaxForm 将在提交按钮被按下时发送。 ajaxSubmit 立即发送。
序列化:
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
另一个使用在表单元素上定义的属性的类似解决方案:
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>
您需要牢记一些事项。
1. 有多种方式提交表单
因此,我们应该绑定到表单提交事件,而不是按钮单击事件。 这将确保我们的代码现在和将来适用于所有设备和辅助技术。
2. Hijax
用户可能没有启用 JavaScript。 hijax模式在这里很好,我们可以使用 JavaScript 轻轻地控制表单,但如果 JavaScript 失败,则让它可提交。
我们应该从表单中提取 URL 和方法,因此如果 HTML 发生变化,我们不需要更新 JavaScript。
3. 不显眼的 JavaScript
使用event.preventDefault()而不是return false是一种很好的做法,因为它允许事件冒泡。 这允许其他脚本与事件相关联,例如可能正在监视用户交互的分析脚本。
速度
理想情况下,我们应该使用外部脚本,而不是内联插入我们的脚本。 我们可以使用脚本标签在页面的 head 部分链接到它,或者在页面底部链接到它以加快速度。 脚本应该悄悄地增强用户体验,而不是妨碍。
代码
假设您同意上述所有内容,并且想要捕获提交事件,并通过 AJAX(hijax 模式)处理它,您可以执行以下操作:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
您可以使用以下内容通过 JavaScript 随时手动触发表单提交:
$(function() {
$('form.my_form').trigger('submit');
});
编辑:
我最近不得不这样做并最终编写了一个插件。
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
将 data-autosubmit 属性添加到您的表单标签,然后您可以执行以下操作:
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
$(function() {
$('form[data-autosubmit]').autosubmit();
});
您还可以使用FormData (但在 IE 中不可用):
var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector
$.ajax({
type: "POST",
url: "yourURL",// where you wanna post
data: formData,
processData: false,
contentType: false,
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
},
success: function(data) {console.log(data)}
});
这就是您使用FormData 的方式。
<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
(function($){
$("body").on("submit", ".my-form", function(e){
e.preventDefault();
var form = $(e.target);
$.post( form.attr("action"), form.serialize(), function(res){
console.log(res);
});
});
)(jQuery);
</script>
这是Alfrekjv答案的修改版本
JavaScript
jQuery(document).submit(function(e){
var form = jQuery(e.target);
if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
e.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(), // serializes the form's elements.
success: function(data) {
console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
}
});
}
});
我想编辑 Alfrekjv 的答案,但偏离太多,所以决定将此作为单独的答案发布。
不发送文件,不支持按钮,例如点击按钮(包括提交按钮)将其值作为表单数据发送,但因为这是一个ajax请求,按钮点击不会被发送。
为了支持按钮,您可以捕获实际的按钮点击而不是提交。
jQuery(document).click(function(e){
var self = jQuery(e.target);
if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
e.preventDefault();
var form = self.closest('form'), formdata = form.serialize();
//add the clicked button to the form data
if(self.attr('name')){
formdata += (formdata!=='')? '&':'';
formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
}
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: formdata,
success: function(data) {
console.log(data);
}
});
}
});
在服务器端,您可以使用 jquery 为 php 设置HTTP_X_REQUESTED_WITH
这个标头检测 ajax 请求
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is ajax
}
即使使用文件输入,此代码也能工作
$(document).on("submit", "form", function(event)
{
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
我真的很喜欢这个答案由superluminary的jQuery插件,尤其是他的包裹方式是解决方案。 所以感谢superluminary提供了一个非常有用的答案。 不过,就我而言,我想要一个插件,它允许我在插件初始化时通过选项定义成功和错误事件处理程序。
所以这就是我想出的:
;(function(defaults, $, undefined) {
var getSubmitHandler = function(onsubmit, success, error) {
return function(event) {
if (typeof onsubmit === 'function') {
onsubmit.call(this, event);
}
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function() {
if (typeof success === 'function') {
success.apply(this, arguments);
}
}).fail(function() {
if (typeof error === 'function') {
error.apply(this, arguments);
}
});
event.preventDefault();
};
};
$.fn.extend({
// Usage:
// jQuery(selector).ajaxForm({
// onsubmit:function() {},
// success:function() {},
// error: function() {}
// });
ajaxForm : function(options) {
options = $.extend({}, defaults, options);
return $(this).each(function() {
$(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
});
}
});
})({}, jQuery);
这个插件让我可以很容易地在页面上“ajaxify”html表单,并提供onsubmit 、 success和error事件处理程序,用于向用户反馈表单提交的状态。 这允许插件如下使用:
$('form').ajaxForm({
onsubmit: function(event) {
// User submitted the form
},
success: function(data, textStatus, jqXHR) {
// The form was successfully submitted
},
error: function(jqXHR, textStatus, errorThrown) {
// The submit action failed
}
});
请注意,成功和错误事件处理程序接收的参数与您从jQuery ajax方法的相应事件接收的参数相同。
我得到了以下内容:
formSubmit('#login-form', '/api/user/login', '/members/');
在哪里
function formSubmit(form, url, target) {
$(form).submit(function(event) {
$.post(url, $(form).serialize())
.done(function(res) {
if (res.success) {
window.location = target;
}
else {
alert(res.error);
}
})
.fail(function(res) {
alert("Server Error: " + res.status + " " + res.statusText);
})
event.preventDefault();
});
}
这假设“url”的帖子以{success: false, error:'my Error to display'}
的形式返回一个 ajax
你可以随心所欲地改变它。 随意使用该片段。
jQuery AJAX 提交表单,只不过是在单击按钮时使用表单 ID 提交表单
请按照步骤
第 1 步 - 表单标签必须有一个 ID 字段
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
您要单击的按钮
<button>Save</button>
第 2 步 -提交事件在 jQuery 中,它有助于提交表单。 在下面的代码中,我们正在准备来自 HTML 元素名称的JSON 请求。
$("#submitForm").submit(function(e) {
e.preventDefault();
var frm = $("#submitForm");
var data = {};
$.each(this, function(i, v){
var input = $(v);
data[input.attr("name")] = input.val();
delete data["undefined"];
});
$.ajax({
contentType:"application/json; charset=utf-8",
type:frm.attr("method"),
url:frm.attr("action"),
dataType:'json',
data:JSON.stringify(data),
success:function(data) {
alert(data.message);
}
});
});
现场演示点击下面的链接
我知道这是一个与jQuery
相关的问题,但是现在使用 JS ES6 事情要容易得多。 由于没有纯javascript
答案,我想我可以为此添加一个简单的纯javascript
解决方案,在我看来,通过使用fetch()
API 更简洁。 这是一种实现网络请求的现代方式。 在您的情况下,由于您已经有一个表单元素,我们可以简单地使用它来构建我们的请求。
const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input");
let formData = new FormData();
for (let input of formInputs) {
formData.append(input.name, input.value);
}
fetch(form.action,
{
method: form.method,
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error.message))
.finally(() => console.log("Done"));
尝试
fetch(form.action,{method:'post', body: new FormData(form)});
function send(e,form) { fetch(form.action,{method:'post', body: new FormData(form)}); console.log('We submit form asynchronously (AJAX)'); e.preventDefault(); }
<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm"> <input hidden name="csrfToken" value="$0meh@$h"> <input name="email" value="aa@bb.com"> <input name="phone" value="123-456-666"> <input type="submit"> </form> Look on Chrome Console > Network after/before 'submit'
考虑使用closest
$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
frm = $(ev.target).closest('form');
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data);
}
})
ev.preventDefault();
});
您可以在提交功能上使用它,如下所示。
HTML 表单
<form class="form" action="" method="post">
<input type="text" name="name" id="name" >
<textarea name="text" id="message" placeholder="Write something to us"> </textarea>
<input type="button" onclick="return formSubmit();" value="Send">
</form>
jQuery 函数:
<script>
function formSubmit(){
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var dataString = 'name='+ name + '&message=' + message;
jQuery.ajax({
url: "submit.php",
data: dataString,
type: "POST",
success: function(data){
$("#myForm").html(data);
},
error: function (){}
});
return true;
}
</script>
更多详细信息和示例访问: http : //www.spiderscode.com/simple-ajax-contact-form/
为避免多次发送表单数据:
不要忘记解除submit事件的绑定,在表单再次提交之前,用户可以多次调用sumbit函数,可能他忘记了什么,或者是验证错误。
$("#idForm").unbind().submit( function(e) {
....
如果您使用form .serialize() - 您需要为每个表单元素指定一个名称,如下所示:
<input id="firstName" name="firstName" ...
表单像这样被序列化:
firstName=Chris&lastName=Halcrow ...
这不是OP问题的答案,
但是如果你不能使用静态表单DOM,你也可以这样尝试。
var $form = $('<form/>').append(
$('<input/>', {name: 'username'}).val('John Doe'),
$('<input/>', {name: 'user_id'}).val('john.1234')
);
$.ajax({
url: 'api/user/search',
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
data: $form.serialize(),
success: function(data, textStatus, jqXHR) {
console.info(data);
},
error: function(jqXHR, textStatus, errorThrown) {
var errorMessage = jqXHR.responseText;
if (errorMessage.length > 0) {
alert(errorMessage);
}
}
});
令人惊讶的是,没有人将data
作为对象提及。 对我来说,这是传递数据的最干净、最简单的方法:
$('form#foo').submit(function () {
$.ajax({
url: 'http://foo.bar/some-ajax-script',
type: 'POST',
dataType: 'json',
data: {
'foo': 'some-foo-value',
'bar': $('#bar').val()
}
}).always(function (response) {
console.log(response);
});
return false;
});
然后,在后端:
// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar
JavaScript
(function ($) {
var form= $('#add-form'),
input = $('#exampleFormControlTextarea1');
form.submit(function(event) {
event.preventDefault();
var req = $.ajax({
url: form.attr('action'),
type: 'POST',
data: form.serialize()
});
req.done(function(data) {
if (data === 'success') {
var li = $('<li class="list-group-item">'+ input.val() +'</li>');
li.hide()
.appendTo('.list-group')
.fadeIn();
$('input[type="text"],textarea').val('');
}
});
});
}(jQuery));
HTML
<ul class="list-group col-sm-6 float-left">
<?php
foreach ($data as $item) {
echo '<li class="list-group-item">'.$item.'</li>';
}
?>
</ul>
<form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
<p class="form-group">
<textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
</p>
<button type="submit" class="btn btn-danger">Add new item</button>
</form>
还有提交事件,它可以像这样触发 $("#form_id").submit()。 如果表单已经在 HTML 中很好地表示,您将使用此方法。 你只是在页面中阅读,用东西填充表单输入,然后调用 .submit()。 它将使用表单声明中定义的方法和操作,因此您无需将其复制到您的 javascript 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.