新手问题 如何使用 Select2 远程 POST 请求 (带参数)?[已解决]

dongli1985 · 2015年08月05日 · 最后由 dongli1985 回复于 2015年08月05日 · 5354 次阅读

我需要让用户选择一个群组,但是只能选择他所在的群组。这应该需要向后端请求数据,我做了一个 API,传入一个用户的 ID,就返回他所在的群组,比如:

$ curl -d '{"user_id": "1"}' http://localhost:3000/api/v1/groups/for_user -H Content-Type:application/json 
[[1, "测试团队"]]

之前使用Select2做了返回所有群组的程序如下:

$('select[id=input-group-name]').select2(
  ajax:
    url: ROOT_PATH+'api/v1/groups/names'
    dataType: 'json'
    delay: 250
    processResults: (data) ->
      {
        results: $.map( data, (d, i) ->
          { id: d[0], text: d[1] }
        )
      }
    results: (data, page) ->
      results: data
)

上面使用的是GET请求,现在需要使用POST请求,并传入user_id参数,目前的程序是:

$('select[id=input-group-name-for-user]').select2(
  ajax:
    type: 'POST' // <----------------------------------- 将请求改为POST
    url: ROOT_PATH+'api/v1/groups/for_user'
    params: {
      contentType: 'application/json; charset=utf-8'
    }
    dataType: 'json'
    data: // <------------------------------------------ 是在这里传入user_id吗?
    delay: 250
    processResults: (data) ->
      {
        results: $.map( data, (d, i) ->
          { id: d[0], text: d[1] }
        )
      }
    results: (data, page) ->
      results: data
)

请问该如何传递参数user_id呢?

PS:Select2的设计和文档真心看得头大,完全靠摸索。

EDIT-1: 我尝试了如下暴力方式:

data: ->
  user_id: 1

但是尝试如下优雅方式时却不行:

data: ->
  user_id: $(this).attr('user_id')

解决方法:

select元素上添加data-user-id属性:

<%=
  f.association :groups,
  label: t('research_record.public_groups'),
  required: true,
  label_method: :name,
  value_method: :id,
  collection: @research_record.groups,
  input_html: {
    id: 'input-group-name-for-user',
    data: { user_id: current_user.id } # <------------------------- 这里添加data-user-id属性
  }
%>

然后优雅地传递参数:

data: ->
  user_id: $('select[id=input-group-name-for-user]').data('user-id')

Select2 will pass any options in the ajax object to jQuery's $.ajax function, or the transport function you specif

接下来参看 http://api.jquery.com/jquery.ajax

#1 楼 @lonre 谢谢回复!我尝试如下貌似可以:

data: ->
  user_id: '2'

那么问题就是如何把 2 换为当前用户的 ID。

嗯,是这样的。

当前用户的获取,是不是应该在后端获取更好呢?

如果实在是要放在前端,那一般的做法是将当前用户 ID 输出到页面,构造成 JS 变量,然后 Ajax 这边直接引用变量。

#3 楼 @lonre 嗯,我在元素里添加了user_id属性:

<%=
  f.association :groups,
  label: t('research_record.public_groups'),
  required: true,
  label_method: :name,
  value_method: :id,
  collection: @research_record.groups,
  input_html: {
    id: 'input-group-name-for-user',
    user_id: current_user.id # <------------------------- 这里添加当前用户ID
  }
%>
<select id="input-group-name-for-user" user_id="1" ...></select>

然后打算在data处通过$(this).attr('user_id')获取,但是貌似不成功。

#4 楼 @dongli1985 看来我错误的使用了this,它并不是select[id=input-group-name-for-user]元素,要直接用后面的元素。

this 有上下文问题。

最直接的方式 $('#input-group-name-for-user').attr('user_id')

另外这个地方建议改成 <select id="input-group-name-for-user" data-user-id="1" ...></select>, 获取改成 $('#input-group-name-for-user').data('user-id')

#6 楼 @lonre 谢谢!你说的很对!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号