none
Jquery Ajax 无法POST 数据到 controller 的 action RRS feed

  • 问题

  • 试着实现jquery.ui.autocomplete但是却出现无法访问 asp.net mvc action的情况
    JQuery代码如下:
    var ajaxCache = {};
    
        //activate autocomplete on boxes that have the autocomplete class
        $("input#test").autocomplete({
            source: function(request, response) {
                //what are we searching for
                var query_type = $(this).attr('element').attr('id');
                //the cacheterm that we use to save it in the cache
                var cachedTerm = (request.term + '' + query_type).toLowerCase();
                //if the data is in the cache and the data is not too long, use it
                if (ajaxCache[cachedTerm] != undefined && ajaxCache[cachedTerm].length < 13) {
                    //map the data into a response that will be understood by the autocomplete widget
                    response($.map(ajaxCache[cachedTerm], function(item) {
                        return {
                            label: item.title,
                            value: item.id
                        }
                    }));
                }
                //get the data from the server
                else {
                    $.ajax({
                        url: "/Dict/Address/DropDownList", //这里是用的MVC2 其中 Dict 为area, controller 是Address 
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: {
                        //query_type: query_type,
                            q: request.term
                        },
                        success: function(data) {
                            //cache the data for later
                            ajaxCache[cachedTerm] = data;
                            alert(data);
                            //map the data into a response that will be understood by the autocomplete widget
                            response($.map(data, function(item) {
                                return {
                                    label: item.title,
                                    value: item.id
                                }
                            }));
                        }
                    });
                }
            },
            //start looking at 3 characters because mysql's limit is 4
            minLength: 1,
            //when you have selected something
            select: function(event, ui) {
                //close the drop down
                this.close
            },
            //show the drop down
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            //close the drop down
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    
    Contoller中的Action代码如下:
    public class AddressController : Controller
        {
            //
            // GET: /Dict/Address/
            private IAddressService addressService;
    
            public AddressController()
            {
                addressService= new AddressService();
            }
    
            public JsonResult DropDownList(string q)
            {
                var queryStr = Server.UrlDecode(q);
                if (string.IsNullOrEmpty(q))
                    return null;
    
                return Json(from c in addressService.retrieveBytitle(queryStr) select new { id= c.id.ToString(), value=c.title }, JsonRequestBehavior.AllowGet);
            }
    
        }
    

    jquery 却一直无法调用 DropDownList

    请各位看看有什么问题

    谢谢各位

    • 已编辑 Henry Gao 2010年4月14日 5:05 修改
    2010年4月14日 4:39

答案

  • 你好,

    你的意思是说现在采用post方式可以知道action方法被调用了是吧。

    如果你确定是这样,那你改变传参的方式试试,采用名值键对的方式传值就可以了。

    如我上面说的: data:"q="+request.term

     $.ajax({
              url: "/Dict/Address/DropDownList", //这里是用的MVC2 其中 Dict 为area, controller 是Address 
              type: "POST",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              data:"q="+request.term,
              
              success: function(data) {
                //cache the data for later
                ajaxCache[cachedTerm] = data;
                alert(data);
                //map the data into a response that will be understood by the autocomplete widget
                response($.map(data, function(item) {
                  return {
                    label: item.title,
                    value: item.id
                  }
                }));
              }
            });
    

    Microsoft Online Community Support
    2010年4月19日 1:24
  • 去掉 contentType: "application/json; charset=utf-8"

    至于data部分,用 data: {
    //query_type: query_type,
    q: request.term
    },

    或者 data: "q=" + request.term 都可以

    • 已标记为答案 Henry Gao 2010年5月17日 8:06
    2010年4月29日 4:17

全部回复

  • 你好,

    你能否确定你代码中利用jquery的ajax调用action的方法被执行了?

    如果这部分代码的确被执行了而调试时就是无法进入DropDownList,那可能是你在global中的route没有定义好。

    如果是这种情况,那你直接在浏览器中敲入这个地址是否能够访问,如果不能那说明真的有问题了。

    如果调试时已经进入到DropDownList方法,就是没有数据,那可以改改上面data传值部分的代码,如下面这中方式:

    data:q=request.term


    Microsoft Online Community Support
    2010年4月16日 3:18
  • 首先谢谢您的关注。对不起应该是我的问题没有描述好。

    我的问题就在于这个action方法没有被调用。

    2010年4月16日 6:32
  • 你好,

    你是否按照我上面的提示检查过代码了吗。

    首先确认那个调用确实运行,如果确实运行了则可能是这个url真的无法访问,这个可以直接在浏览器中访问那个地址测试下就直到了。


    Microsoft Online Community Support
    2010年4月16日 6:35
  • 你好,$.ajax是否真的运行了。
    Microsoft Online Community Support
    2010年4月16日 9:23
  • 我现在还没有解决问题。使用POST方式,应该没有涉及路由问题吧,为什么要设置Route呢?

    我按照您说的配置了路由如下:

    #region Address
    //这里是为了POST方式传递
      context.MapRoute(
      null,
      string.Concat(AreaName, "/Address/{action}"),
      new { area = AreaName, controller = "Address", action ="DropDownList" },
      new[] { "sbf.Solutions.TMS.MvcWeb.Areas.Dict.Controllers" }
      );
    //这里是为了能够实现GET方式的传递
      context.MapRoute(
      null,
      string.Concat(AreaName, "/Address/{action}/{q}"),
      new { area = AreaName, controller = "Address", action ="DropDownList" },
      new[] { "sbf.Solutions.TMS.MvcWeb.Areas.Dict.Controllers" }
      );
    
    #endregion

    也没有成功,action 方法 被调用了,但是参数为空。

    在浏览器中直接输入上面的路径,是可以访问的,但是无法传参。

    如果我将$.Ajax修改为如下方式就可以运行:

     

    $.ajax({
        url: "/Dict/Address/DropDownList/" + request.term,
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: { parentId : $("input[type=hidden].comboboxValue").val(), queryString : escape(request.term)},
        success: function(data) {
        //cache the data for later
        ajaxCache[cachedTerm] = data;
        //map the data into a response that will be understood by the autocomplete widget
        response($.map(data, function(item) {
         return {
         label: item.title,
         value: item.title,
         id: item.id
         }
        }));
        }
       });

     

    • 已编辑 Henry Gao 2010年4月17日 1:44 格式错误
    2010年4月17日 1:42
  • 你好,

    你的意思是说现在采用post方式可以知道action方法被调用了是吧。

    如果你确定是这样,那你改变传参的方式试试,采用名值键对的方式传值就可以了。

    如我上面说的: data:"q="+request.term

     $.ajax({
              url: "/Dict/Address/DropDownList", //这里是用的MVC2 其中 Dict 为area, controller 是Address 
              type: "POST",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              data:"q="+request.term,
              
              success: function(data) {
                //cache the data for later
                ajaxCache[cachedTerm] = data;
                alert(data);
                //map the data into a response that will be understood by the autocomplete widget
                response($.map(data, function(item) {
                  return {
                    label: item.title,
                    value: item.id
                  }
                }));
              }
            });
    

    Microsoft Online Community Support
    2010年4月19日 1:24
  • 去掉 contentType: "application/json; charset=utf-8"

    至于data部分,用 data: {
    //query_type: query_type,
    q: request.term
    },

    或者 data: "q=" + request.term 都可以

    • 已标记为答案 Henry Gao 2010年5月17日 8:06
    2010年4月29日 4:17