jQuery中无法识别表单输入字段 [英] Form input field not recognized in jquery

问题描述

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

I have this search form to post using 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代码段:

jQuery snippet:

$(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上，我在控制台中仅看到以下内容:

The problem is that the form does not seem to be serialized properly, so on keyup I see only this in the console:

form: token=LSN71T8CeWr

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

Also on the server side, the received post parameters is empty.

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

So wondering what is wrong here and how to fix it?

推荐答案

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

Works fine in the attached snippet

$(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中无法识别表单输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！