我有一个名为orderproductForm的表单和未定义数量的输入。
我想用jQuery。get或ajax或类似的东西会通过ajax调用一个页面，并发送orderproductForm表单的所有输入。
我想有一种方法是
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
然而，我不知道确切地所有表单输入。是否有一个特性，功能或一些东西，只是发送所有的表单输入?
当前回答
Try
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'
其他回答
你可以使用Ajax Form Plugin或jQuery serialize函数中的ajaxForm/ajaxSubmit函数。
AjaxForm：
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
or
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
当按下提交按钮时，ajaxForm将发送。ajaxSubmit立即发送。
序列化:
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
AJAX序列化文档在这里。
另一个类似的使用form元素上定义的属性的解决方案:
<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>
这段代码甚至可以使用文件输入
$(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)
{
}
});
});
你可以像下面这样在提交函数上使用这个。
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/
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 AJAX提交表单?
