表单中的数据未使用javascript中的serialize(）获取

Data in the form not getting using serialize() in javascript

本文关键字：serialize 获取 中的 javascript 数据 未使用 表单      更新时间：2023-09-26

下面是html文件中的表单html文件

<blc:form value method=POST action="@{/cart/add}">
  ..... 
  .....
    <div>
      <input class="btn btn-success" type="button" value="Add to Cart" id="addToCart"/> <!-- submit button -->
    </div>
     <div id="productInCart"></div>
  ......
    </div>
</blc:form>

从上面的表单中，我需要通过获取请求处理的动作url和表单数据来发送ajax请求。

JavaScript

$document.on('click','#addToCart',function(e){
alert('test1')
var url = $(this).button.parents('form').attr('action')
var data= button.parents('form').serialize()
alert("request data:-"+data)//control is not reaching up to here
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function(data){
             $("#productInCart").html("")
             $("#productInCart").html(data)
             alert('success')
          }
        error: function(){
             alert('fail')
          }
    });
});

控件正在进入功能并打印alert。我可以从上面的表单中获取动作属性值，但无法获取数据。我正在使用serialize()获取表单数据。有人能帮我如何获取表格数据吗？

好吧，在读取数据时有一个额外的点符号，我也会使用closest而不是parents，因为它有一个更预期的行为：

button.parents.('form').serialize()
--------------^ here

因此：

button.closest('form').serialize()

此外，这里还缺少一个逗号：

 $.ajax({
    type: "POST",
    url: url,
    data: data
    ----------^ here

因此：

 $.ajax({
    type: "POST",
    url: url,
    data: data,
    ...

应该有效，否则看起来没问题。

您没有在代码中定义button。如前所述，应该使用closest而不是parents，因为parents针对多个元素。以下是您尝试做的工作示例：

$(document).on('click', '#submit', function() {
  var $button = $(this),
    $form = $button.closest('form'),
    url = $form.attr('action'),
    data = $form.serialize();
  $('#log').html('Url: ' + url + '<br/> data: ' + data)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="my/url">
  <input type="text" name='input' value='test value'>
  <input type="checkbox" name='a' value='1' checked>
  <input type="button" value='submit' id='submit'>
</form>
<div id="log"></div>

相关文章：