我有一个名为orderproductForm的表单和未定义数量的输入。
我想用jQuery。get或ajax或类似的东西会通过ajax调用一个页面，并发送orderproductForm表单的所有输入。
我想有一种方法是
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
然而，我不知道确切地所有表单输入。是否有一个特性，功能或一些东西，只是发送所有的表单输入?
当前回答
你可以像下面这样在提交函数上使用这个。
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/
其他回答
这是一个简单的参考:
// 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 actionUrl = form.attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
你可以像下面这样在提交函数上使用这个。
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#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
这段代码甚至可以使用文件输入
$(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)
{
}
});
});
我得到了以下信息:
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();
});
}
这假设post到'url'返回一个ajax形式的{success: false, error:'my error to display'}
你可以随意改变。请随意使用该片段。
