使用ajax post方法的select2

Posted 2023-05-07

【中文标题】使用ajax post方法的select2

【英文标题】：select2 with ajax post method

【发布时间】：2013-01-02 09:59:08

【问题描述】：

我正在尝试将 select2 与 ajax 加载一起使用。

这是我的代码：

clonedTemplate.find('[id^=detailsPhaseFinanceMinor_]').select2(
    placeholder: "Select",
    minimumInputLength: 1,
    ajax:  // instead of writing the function to execute the request we use Select2's convenient helper
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        url: "mapBasic.aspx/GetFinSys",
        dataType: 'json',
        data: function (term, page) 
            return "'term':\"" + term + "\"";
        ,
        results: function (data, page)  // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return  results: data.Value ;
        
    
);

ajax 调用是对同一页面代码隐藏中的 webmethod/pagemethod 的调用：

[WebMethod]
    public static List<LookupCodeItem> GetFinSys(string term)
    
        string stringToCompareTo = term.ToLower();

        List<LookupCodeItem> result = new List<LookupCodeItem>();


        // FIN SYS
        using (mapEntities db = new mapEntities())
        
            List<MPO_FINSYS_AMT> finSysCodes = (from x in db.MPO_FINSYS_AMT
                                                select x).ToList();

            foreach (MPO_FINSYS_AMT item in finSysCodes)
            
                string valKey = string.Format("0.1.2", item.FY, item.MDOT_MPO_CD, item.FIN_SYS);
                LookupCodeItem x = new LookupCodeItem();
                x.Value = valKey;
                x.ShortDescription = string.Format("0.1.2", item.FY, item.MDOT_MPO_CD, item.FIN_SYS); ;
                x.LongDescription = string.Empty;
                result.Add(x);

            
        

        return result;
    

在文本框中输入数据时，发出 POST 请求，发送的 json 格式似乎正确。

但是，pagemethod 的响应是整个 html 页面。据我了解，如果您没有在 ajax 调用中正确设置“contentType”，则 post 方法可能会发生这种情况。我已将其设置为与在页面上工作的所有其他 ajax 调用相同（它们不使用 select2）。

select2 是否忽略“contentType”属性？还是我做错了什么？

** 编辑 ** 发布后，我在 select2 的 github 站点上发现了这个问题： Issue 492 - Add Support for contentType to Ajax

它似乎没有通过 contentType。我是否能够绕过 selet2 的内置 ajax 助手并使用我自己手动定义的助手？

【参考方案1】：

我遇到了同样的问题，下面的解决方案对我有用：

ajax: 
   ...
   params:  // extra parameters that will be passed to ajax
        contentType: "application/json; charset=utf-8",
   
   ...

【参考方案2】：

不要忘记将 CSRF 令牌添加到您的发布请求中。可能是您在客户端做的一切都是正确的，但服务器拒绝了请求，因为它缺少令牌。例如，请参阅 php Laravel 框架：https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token 了解更多信息。

【参考方案3】：

这对我有用：

 $(document).ready(function () 



        $('.js-example-basic-single').select2(
            minimumInputLength: 2,
            ajax: 
                url: "your api endpoint",
                dataType: 'json',
                contentType:"application/json; charset=utf-8",
                type: "POST",
                data: function (term) 
                    return (JSON.stringify( searchString: term.term ))
                
            
        );
        
);

html :https://select2.org/getting-started/basic-usage

【参考方案4】：

我建议使用 WebApi 或 ServiceStack 进行数据调用，而不是 [webmethod]。

【讨论】：

这是一个建议，应该放在 cmets 上，而不是放在答案中。另外，改变编程技术对 OP 有什么帮助，真的吗？

只是试图让海报成为一种简单的建议/支持的修复方式。鉴于这是 7 个月前完成的，我现在无能为力！ :-)