jQuery AJAX提交表单
我有一个名为orderproductForm的表单和一个未定义数目的input。
我想做一些jQuery.get或ajax或类似的东西，通过Ajax调用一个页面，并发送formsorderproductForm的所有input。
我想有一种方法是做类似的事情
jQuery.get("myurl", {action : document.orderproductForm.action.value, cartproductid : document.orderproductForm.cartproductid.value, productid : document.orderproductForm.productid.value, ... 但是我不知道所有的表单input。 是否有一个function，function或者只是发送所有的表单input？
谢谢
您可以使用Ajax Form Plugin或jQuery序列化函数中的ajaxForm / ajaxSubmit函数。
AjaxForm ：
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
要么
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
当提交button被按下时，ajaxForm会发送。 ajaxSubmit立即发送。
序列化 ：
$.get('server.php?' + $('#theForm').serialize()) $.post('server.php', $('#theForm').serialize())
AJAX序列化文档在这里 。
这是一个简单的参考：
// this is the id of the form $("#idForm").submit(function(e) { var url = "path/to/your/script.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#idForm").serialize(), // serializes the form's elements. success: function(data) { alert(data); // show response from the php script. } }); e.preventDefault(); // avoid to execute the actual submit of the form. });
我希望它可以帮助你。
另一个类似的解决scheme使用表单元素定义的属性：
<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.提交表单有几种方法
- 使用提交button
- 按回车
- 通过在JavaScript中触发提交事件
- 可能更多取决于设备或未来的设备。
因此，我们应该绑定到表单提交事件 ，而不是button单击事件。 这将确保我们的代码现在和未来在所有设备和辅助技术上运行。
2. Hijax
用户可能没有启用JavaScript。 在这里，一个hijax模式是很好的，我们可以轻松地使用JavaScript来控制表单，但是如果JavaScript失败，就让它保持可提交状态。
我们应该从表单中提取URL和方法，所以如果HTML改变了，我们不需要更新JavaScript。
3.不显眼的JavaScript
使用event.preventDefault（）而不是返回false是很好的做法，因为它允许事件冒泡。 这可以让其他脚本与事件绑定，例如可能正在监视用户交互的分析脚本。
速度
理想情况下，我们应该使用外部脚本，而不是插入我们的脚本内联。 我们可以使用脚本标记链接到页面的头部，或者链接到页面底部以获取速度。 脚本应该悄悄地增强用户体验，而不是阻碍。
码
假设你同意上述所有内容，并且你想要抓住submit事件，并通过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属性到你的表单标签，然后你可以这样做：
HTML
<form action="/blah" method="post" data-autosubmit> <!-- Form goes here --> </form>
JS
$(function() { $('form[data-autosubmit]').autosubmit(); });
简单的版本（不发送图像）
<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>
复制并粘贴页面上的表单或所有表单的Ajax化
这是Alfrekjv的答案的修改版本
- 它将使用jQuery> = 1.3.2
- 您可以在文档准备好之前运行它
- 您可以删除并重新添加表单，它仍然可以工作
- 它将发布到与表单的“action”属性中指定的常规表单相同的位置
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的答案，但偏离了它太多，所以决定张贴这个作为一个单独的答案。
不发送文件，不支持button，例如点击一个button（包括提交button）将其值作为表单数据发送，但是因为这是一个ajax请求，所以不会发送button点击。
要支持button，您可以捕获实际的button点击，而不是提交。
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 请求 ，jquery设置HTTP_X_REQUESTED_WITH为PHP
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { //is ajax }
你也可以使用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： https ： //developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects
即使使用文件input，此代码也可以工
$(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插件的解决scheme。 所以感谢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'返回一个ajax的forms{success: false, error:'my Error to display'}
你可以随意改变它。 随意使用该片段。
考虑使用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(); });
为了避免多个formdata发送：
不要忘了解除绑定提交事件，再次提交表单之前，用户可以多次调用sumbit函数，也许他忘了一些东西，或者是一个validation错误。
$("#idForm").unbind().submit( function(e) { ....
如果你使用form .serialize（） – 你需要给每个表单元素一个这样的名字：
<input id="firstName" name="firstName" ...
表单被这样序列化：
firstName=Chris&lastName=Halcrow ...
你可以使用这个提交function如下。
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/
还有提交事件，可以像这样触发$（“＃form_id”）。submit（）。 如果表单在HTML中已经被很好地performance出来，你可以使用这个方法。 您只需在页面中阅读，填写表单input内容，然后调用.submit（）。 它将使用表单声明中定义的方法和动作，因此您不需要将其复制到JavaScript中。
例子
