呼叫使用jQuery的Ajax的Web方法 [英] Call a web method using jQuery Ajax

问题描述

我想创建一个自动完成字段的搜索选项。我曾尝试与以下code。

但 Web方法不火在自动完成函数执行。
会是什么原因？

下面是jQuery的功能：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{$（＃＆LT;％= tags.ClientID％GT;自动完成）（{
         来源：函数（请求，响应）{
         $阿贾克斯（{
             键入：POST，
            的contentType：应用/ JSON的;字符集= UTF-8，
            网址：〜/服务/ AutoComplete.asmx / GetFarmersByName
            数据：{'名'：'+ $（＃＆LT;％= tags.ClientID％GT;）VAL（）+'}，
            数据类型：JSON
            异步：真实，
            dataFilter：功能（数据）{返回数据; }，
            成功：功能（数据）{
                      响应（$（data.d，函数（项目）{
                                返回{
                                    值：item.AdrNm
                                }
                       }））;
                     }，
           错误：功能（XMLHtt prequest，textStatus，errorThrown）{
                            警报（textStatus）;
                        }
                    }）;
                }            }）;
        }）;
 ＆LT; / SCRIPT＆GT;
 

下面是Web方法

  [的WebMethod]
    [ScriptMethod（ResponseFormat = ResponseFormat.Json）
    公开名单＆LT; FMISPersonalDataViewByName_Result＆GT; GetFarmersByName（字符串名称）
    {
        this._personalData =新personalData（）;
        INT CKY = 45;
        CDMA cdMas =新的CDMA（）;
        cdMas = this._personalData.getcdMasByConcdCd2（CKY，阿霉素preFIX，真正的）;
        INT prefixKy = cdMas.CdKy;        清单＆LT; FMISPersonalDataViewByName_Result＆GT;名单=新名单，LT; FMISPersonalDataViewByName_Result＆GT;（）;        清单= this._personalData.GetPersonalDataByName（prefixKy，CKY，名）;
        返回列表;
    }
 

解决方案

请确保您通过您的服务功能有断点击中了Web服务的功能。请改变你的脚本如下：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        $（＃＆下;％= tags.ClientID％gt;中）。自动填充
        （{            资源：
            功能（请求，响应）{
                $就
                （{
                    网址：＆LT;％= RESOLVEURL（〜/服务/ AutoComplete.asmx / GetFarmersByName）％＆gt;中，                    数据：{'名'：'+ $（＃＆LT;％= tags.ClientID％GT;）VAL（）+'}，                    数据类型：JSON                    键入：POST，                    的contentType：应用/ JSON的;字符集= UTF-8，                    异步：真实，                    dataFilter：功能（数据）{返回数据; }，                    成功：功能（数据）
                    {
                        响应（$（data.d，函数（项目）
                        {
                            返回
                            {
                                值：item.AdrNm
                            }
                        }））;
                    }，
                    错误：功能（XMLHtt prequest，textStatus，errorThrown）{
                        警报（textStatus）;
                    }
                }）;
            }        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

I want to create an Autocomplete field for a search option. I have tried with following code.

But the web method doesn't fire when the Autocomplete function is execution. What will be the reason ?

Here is the jQuery function:

<script type="text/javascript">
    $(function () { $("#<%=tags.ClientID %>").autocomplete({
         source:function (request, response) {
         $.ajax ({
             type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "~/Services/AutoComplete.asmx/GetFarmersByName",
            data: "{ 'name' : '" + $("#<%=tags.ClientID %>").val() + "'}",
            dataType: "json",
            async: true,
            dataFilter: function (data) { return data; },
            success: function (data) {
                      response($(data.d, function (item) {
                                return            {
                                    value: item.AdrNm
                                }
                       }));
                     },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                }

            });
        });
 </script>

Here is the web method

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<FMISPersonalDataViewByName_Result> GetFarmersByName(string name)
    {
        this._personalData = new personalData();
        int cky = 45;
        CdMa cdMas = new CdMa();
        cdMas = this._personalData.getcdMasByConcdCd2(cky, "AdrPreFix", true);
        int prefixKy = cdMas.CdKy;

        List<FMISPersonalDataViewByName_Result> list = new List<FMISPersonalDataViewByName_Result>();

        list = this._personalData.GetPersonalDataByName(prefixKy, cky, name);
        return list;
    }

解决方案

Make sure you hit the webservice function by having breakpoint on your service function. Please change your script to below:

<script type="text/javascript">
    $(function () {
        $("#<%=tags.ClientID %>").autocomplete
        ({

            source:
            function (request, response) {
                $.ajax
                ({
                    url: " <%=ResolveUrl("~/Services/AutoComplete.asmx/GetFarmersByName") %>",

                    data: "{ 'name' : '" + $("#<%=tags.ClientID %>").val() + "'}",

                    dataType: "json",

                    type: "POST",

                    contentType: "application/json; charset=utf-8",                   

                    async: true,

                    dataFilter: function (data) { return data; },

                    success: function (data) 
                    {
                        response($(data.d, function (item) 
                        {
                            return
                            {
                                value: item.AdrNm
                            }
                        }));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }

        });
    });
</script>

这篇关于呼叫使用jQuery的Ajax的Web方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！