Question

下面是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()获取表单数据的数据。谁能帮助我如何获取表单数据？

Answer 1

嗯，在阅读数据时你有一个额外的点符号，我也使用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,
    ...

应该工作，否则看起来没问题。

Answer 2

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

＆＃13;

$(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)

})

＆＃13;

<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>

＆＃13;

表单中的数据没有在javascript中使用serialize（）

2 个答案: