[英]Why form serialize does not work in this case?
我有一個表單,我想通過AJAX發送,所以我將使用序列化jQuery函數。
這是代碼(並非所有元素都有“名稱”,但無論如何警報應該顯示一些內容):
JS
$('#add-producto').click(function (e) {
alert($('#datos-add').serialize())
$.ajax({
type: "POST",
url: "insertar.php",
data: $('#datos-add').serialize(),
success: function (data) {
alert(data);
}
});
e.preventDefault();
});
HTML
<form id="#datos-add">
<div class="form-horizontal">
<div class="modal modal-block">
<div class="modal-header">
<h3>Añadir productos</h3>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label">Marca</label>
<div class="controls">
<input type="text" name="marca" id="marca" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">Producto</label>
<div class="controls">
<input type="text" name="descr" id="descr" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">Tallajes</label>
<div class="controls controls-row">
<input id="tallajes" value="España">
</div>
</div>
<div class="control-group">
<label class="control-label">Referencias</label>
<div class="controls controls-row">
<input id="referencias" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label">Número de tallas</label>
<div class="controls controls-row">
<input type="number" min="1" max="99" value="5" id="numero-tallas" class="span1">
</div>
</div>
<div class="control-group">
<label class="control-label">Primera talla</label>
<div class="controls controls-row">
<input type="text" id="primera-talla" value="XS" class="span1">
</div>
</div>
</div>
<div class="modal-footer">
<div class="btn-group">
<button id="borrar" class="btn" type="button">Borrar todo</button>
<button id="generar" class="btn btn-primary" type="button">Generar tabla</button>
</div>
</div>
</div>
<div class="form-horizontal">
<div id="formulario-medidas" class="modal modal-block">
<div class="modal-header">
<h4>Tabla de medidas</h4>
</div>
<div class="modal-body">
<table id="tabla-medidas" class="table table-bordered"></table>
</div>
<div class="modal-footer">
<button id="medidas-completadas" class="btn btn-success" type="button">Medidas completadas</button>
</div>
</div>
<div id="formulario-tallajes" class="modal modal-block">
<div class="modal-header">
<h4>Tabla de tallajes</h4>
</div>
<div class="modal-body">
<table id="tabla-tallajes" class="table table-bordered"></table>
</div>
<div class="modal-footer">
<button id="add-producto" class="btn btn-block btn-large btn-danger" type="button">Añadir producto</button>
</div>
</div>
</div>
</div>
</form>
你看到我做錯了嗎?
任何提示,建議或幫助將不勝感激,如果您需要更多信息,請告訴我,我將編輯該帖子。
您的表單ID是“datos-añadir”,但您的JavaScript指的是“datos-add”。
這是一個有效的jsfiddle分支 。 我所做的就是修復參考:
$('#add-producto').click(function (e) {
var $form = $('#datos-añadir');
alert($form.serialize());
return false;
所有的拳頭,有一個錯字。 它應該是<form id="datos-add">
而不是<form id="#datos-add">
。
但我也認為你是以錯誤的方式序列化它。
當你進行POST ajax調用時,你應該使用.serializeArray()
而不是.serialize()
。
.serialize()
將連接所有鍵/值,如查詢字符串。 .serializeArray()
將包含請求中的所有鍵/值。
簡而言之,嘗試:
$('#add-producto').click(function (e) {
$.ajax({
type: "POST",
url: "insertar.php",
data: $('#datos-add').serializeArray(),
success: function (data) {
alert(data);
}
});
e.preventDefault();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.