Question

我有一个表单，它是foreach()循环的一部分，在显示的每个用户状态的同一页面上重复。

表单由一个简单的“喜欢”按钮组成，按下时按钮应通过AJAX将数据发送到控制器。

目前，我只是试图获取status_id和user_id的动态隐藏输入字段的值，而我却失败了。

每当我点击任何状态的按钮时，它总会返回数据库中最新状态的ID，该状态首先显示在页面上。

我尝试调用表单的ID然后调用类，然后我尝试直接调用按钮并将按钮标记内的动态值添加为data-user和data-status，它总是失败。< / p>

我还在submit和click上尝试了不同的事件 - 点击不会返回任何内容，但在提交时每次都返回相同的状态ID。

另外，如果我想通过AJAX传递数据，是否需要表单？我不能直接通过点击按钮传递数据吗？

这是表格

{!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form', 'class' => 'likeform']) !!}
     {!! Form::hidden('like_status', $status->id) !!}
     {!! Form::hidden('user_id', Auth::user()->id) !!}
     <button type="submit" class="btn btn-info btn-xs like" data-user="{{ Auth::user()->id }}" data-status="{{ $status->id }}" id="like-status">
           <i class="fa fa-thumbs-up"></i> Like ({{ $likes_count }})
     </button>
{!! Form::close() !!}

这是Javascript

$('.likeform').submit(function(e) {
    e.preventDefault();

    var status_id = $('.like').data('status');
    var user_id = $('.like').data('user');

    console.log(status_id + ' ' + user_id);
});

这是DOM中前两个状态的呈现HTML

<form method="POST" action="http://localhost/socialnet/public/likeStatus" accept-charset="UTF-8" id="like_form" class="likeform"><input name="_token" type="hidden" value="lIs80IwNwY6Gzojefiwvdlj8d0PCCoxsZtrlGfP4">
       <input name="like_status" type="hidden" value="21">
       <input name="user_id" type="hidden" value="14">
       <button type="submit" class="btn btn-info btn-xs like" data-user="14" data-status="21" id="like-status">
              <i class="fa fa-thumbs-up"></i> Like (0)
      </button>
</form>


<form method="POST" action="http://localhost/socialnet/public/likeStatus" accept-charset="UTF-8" id="like_form" class="likeform"><input name="_token" type="hidden" value="lIs80IwNwY6Gzojefiwvdlj8d0PCCoxsZtrlGfP4">
       <input name="like_status" type="hidden" value="20">
       <input name="user_id" type="hidden" value="14">
       <button type="submit" class="btn btn-info btn-xs like" data-user="14" data-status="20" id="like-status">
               <i class="fa fa-thumbs-up"></i> Like (0)
       </button>
</form>

Answer 1

我感觉这两条jquery线没有按照你的想法行事。

var status_id = $('.like').data('status');
var user_id = $('.like').data('user');

由于每个提交按钮都有like类，$('.like')包含所有提交按钮的数组，因此.data函数只返回最后一个。

如果您想要获得与提交表单相关的那个，您需要更改您的选择器。像这样的东西;

var submitBtn = $(this).find('.like');
var status_id = submitBtn.data('status');
var user_id = submitBtn.data('user');

即使你通过AJAX发送一个正确的表单也没关系，如果你的脚本中的某些内容失败，那么有一个可以工作的表单是一个很好的后备。与此同时，我不知道为什么在您的隐藏字段中提供此数据时，为什么不想在提交按钮中添加data-*属性，为什么不使用这些？

如何使用jQuery以重复形式获取字段的值？

1 个答案: