使用ajax post结果更新jquery

时间:2010-11-24 17:34:17

标签: jquery

我正在尝试将原型转换为我所做的jquery。

我的原型是

 $$(".user-link").each(function(el){
el.observe("mouseover", function(event) {
    _selectedLinkEl = el;
    _detailEl = event.element().next();
    _detailEl.show();
    _href=el.readAttribute('href').split("/")[2];

      new Ajax.Request('/users/user_detail/?name='+_href, {
    onSuccess: function(transport) {
        if (200 == transport.status)
            _detailEl.update(transport.responseText);
        }
                                    });

    _body.observe("mouseover", _bodyMouseOverFunction);
});
});

   var _bodyMouseOverFunction = function(event) {
if(event.element() != _selectedLinkEl &&
        event.element() != _detailEl &&
        !event.element().ancestors().include(_detailEl)) {
_detailEl.hide();
_body.stopObserving("mouseover", _bodyMouseOverFunction);
    }
 };

如何将上面的内容更改为jquery?

user-link是许多链接中存在的类名。我试图通过此链接在鼠标上执行ajax请求。

编辑:

我试过了               jQuery的(文件)。就绪(函数(){

                 jQuery(".user-link").hover(function() {


                       jQuery(this).next().show();
           var href=jQuery(this).attr("href");

           href= href.split("/")[2];

       jQuery.post('http://localhost:3000/users/user_detail/?name='+href,
         function(data){
             alert("Data Loaded: " + data);

            }

           );


      }); //hover
  });// doc ready

我收到了关于ajax请求结果的警报。如何使用获得的结果更新元素?

1 个答案:

答案 0 :(得分:1)

希望这有助于您入门:

$(".user-link").mouseover(function(event) {
    _selectedLinkEl = this;
    _detailEl = event.target.next();
    _detailEl.show();
    _href=$(this).attr('href').split("/")[2];

    $.get('/users/user_detail/?name='+_href,
      function(data, textStatus, xhr) {
        if (200 == xhr.status) {
            _detailEl.text(textStatus);
        }
      }
    );

  $(_body).mouseover(_bodyMouseOverFunction);
}); // user-link

var _bodyMouseOverFunction = function(event) {
  if(event.target != _selectedLinkEl &&
      event.target != _detailEl &&
      $.inArray(_detailEl, event.target.parents() ) == -1) {
        _detailEl.hide();
        $(_body).unbind("mouseover", _bodyMouseOverFunction);
    }
 };