我有一个名称为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 Form Plugin的ajaxForm/ajaxSubmit函数或jQuery的serialize函数。
AjaxForm。
$("#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是一个很好的做法,因为它允许事件冒泡。 这样可以让其他脚本与事件结合起来,例如可能会监控用户交互的分析脚本。
速度
我们最好使用外部脚本,而不是将我们的脚本内嵌。 我们可以在页面的头部使用脚本标签链接到这个脚本,或者为了速度而链接到页面的底部。 脚本应该静静地提升用户体验,而不是碍事。
代码
假设你同意以上所有的观点,并且你想抓住提交事件,并通过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][1]的方法。
[1]: https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects
简单版(不发送图片
<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's答案的修改版。
脚本语言
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设置的HTTP_X_REQUESTED_WITH
这个头来检测ajax请求。
对于php
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][2]的[这个答案][1],尤其是他将解决方案包装在一个jQuery插件中的方式。 所以感谢[superluminary][2]提供了一个非常有用的答案。 在我的情况下,我想要一个插件,允许我在插件初始化时通过选项来定义成功和错误事件处理程序。
所以,我想到了下面的办法:{{{6383857}}。
;(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
}
});
请注意,success和error事件处理程序接收的参数与你从jQuery ajax方法的相应事件中接收的参数相同。
[1]: https://stackoverflow.com/a/16419406/649497 [2]: https://stackoverflow.com/users/687677/superluminary
我得到了以下我。
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'。
返回一个ajax,形式为{success.false, error:'my Error to display'}
。
false, error:'my Error to display'}`。
你可以根据自己的喜好来改变这个形式。 请随意使用该代码段。
jQuery AJAX提交表单,无非是当你点击一个按钮时,使用表单ID提交一个表单。
请按照以下步骤操作
步骤1--表格标签必须有一个ID字段。
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
您要点击的按钮
<button>Save</button>
第二步 - submit事件是在jQuery中帮助提交表单的。 在下面的代码中,我们从HTML元素name准备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 AJAX提交表单?][1] 。
[1]:
考虑使用 "最近的"。
$('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/
这不是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);
}
}
});
只是友好地提醒一下,数据
也可以是一个对象。
$('form#foo').submit(function () {
$.ajax({
url。
'http://foo.bar/some-ajax-script'。
类型:'POST',。
'POST'。
dataType:
'json'。
数据:{
'foo':
'some-foo',
'bar':
'some-bar'。
}
}).always(function (data) {
console.log(data);
});
return false;
});
我知道这是一个与 "jQuery "相关的问题,但现在有了JS ES6,事情就简单多了。 由于没有纯粹的 "javascript "答案,我想我可以通过使用 "fetch() "API来添加一个简单的纯粹的 "javascript "解决方案,在我看来这是更干净的。 这是一种实现网络请求的现代方式。 在你的例子中,由于你已经有了一个表单元素,我们可以简单地使用它来建立我们的请求。
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"));