Question

我有要使用jQuery发布的搜索表单：

<form id="search-article-form" method="post">
    <input type="hidden" name="token" value="LSN71T8CeWr">
    <input id="searcharticle" type="text" placeholder="search..."
        name="searcharticle">
</form>

jQuery代码段：

$(function () {
  $('#searcharticle').keyup(function() {      
      var form = $('#search-article-form');  
      console.log('form:', form.serialize());

      $.ajax({
          type: "POST",
          url: "/search/article/",
          data: form.serialize(),

          success: searchSuccess,
          dataType: 'html'
      });
  });
});

function searchSuccess(data, textStatus, jqXHR) {
  console.log('data:', data);
  $('#search-results').html(data);
}

问题在于该表单似乎未正确序列化，所以在keyup上，我在控制台中仅看到以下内容：

form: token=LSN71T8CeWr

同样在服务器端，接收到的post参数为空。

所以想知道这里出了什么问题以及如何解决？

Answer 1

在随附的代码段中效果很好

$(function () {
  $('#searcharticle').keyup(function() {      
      var form = $('#search-article-form');  
      console.log('form:', form.serialize());

  });
});

function searchSuccess(data, textStatus, jqXHR) {
  console.log('data:', data);
  $('#search-results').html(data);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search-article-form" method="post">
    <input type="hidden" name="token" value="LSN71T8CeWr">
    <input id="searcharticle" type="text" placeholder="search..."
        name="searcharticle">
        
</form>

jQuery中无法识别表单输入字段

1 个答案: