濟(jì)南網(wǎng)站制作中，做商城ecshop系統(tǒng)一個不錯的選擇，他的功能和成熟的系統(tǒng)模式，使得許多濟(jì)南網(wǎng)站建設(shè)公司越來越對ecshop有更多的信賴，其中ecshop中的ajax效果做的非常好，可以直接在后臺的列表界面就能修改商品數(shù)量，庫存數(shù)量，商品名稱等，無需點擊編輯重新提交表單，使得用戶體驗做的非常好，簡介方便。濟(jì)南騰飛網(wǎng)絡(luò)這篇文章講解一下，ecshop后臺ajax無刷新修改商品數(shù)量的原理是什么，怎么實現(xiàn)的。

一、演示效果圖：

二、無刷新修改商品數(shù)量實現(xiàn)方法：

我們通過上圖可以看到這里執(zhí)行了一個onclick事件，通過點擊觸發(fā)listTable函數(shù)的edit方法，下面我們看下這個函數(shù)是怎么寫的。

/**
 * 創(chuàng)建一個可編輯區(qū)
 */
listTable.edit = function(obj, act, id)
{
  var tag = obj.firstChild.tagName;
 

  if (typeof(tag) != "undefined" && tag.toLowerCase() == "input")
  {
    return;
  }

  /* 保存原始的內(nèi)容 */
  var org = obj.innerHTML;
  var val = Browser.isIE ? obj.innerText : obj.textContent;

  /* 創(chuàng)建一個輸入框 */
  var txt = document.createElement("INPUT");
  txt.value = (val == 'N/A') ? '' : val;
  txt.style.width = (obj.offsetWidth + 12) + "px" ;

  /* 隱藏對象中的內(nèi)容，并將輸入框加入到對象中 */
  obj.innerHTML = "";
  obj.appendChild(txt);
  txt.focus();

  /* 編輯區(qū)輸入事件處理函數(shù) */
  txt.onkeypress = function(e)
  {
    var evt = Utils.fixEvent(e);
    var obj = Utils.srcElement(e);

    if (evt.keyCode == 13)
    {
      obj.blur();

      return false;
    }

    if (evt.keyCode == 27)
    {
      obj.parentNode.innerHTML = org;
    }
  }

  /* 編輯區(qū)失去焦點的處理函數(shù) */
  txt.onblur = function(e)
  {
    if (Utils.trim(txt.value).length > 0)
    {
      res = Ajax.call(listTable.url, "act="+act+"&val=" + encodeURIComponent(Utils.trim(txt.value)) + "&id=" +id, null, "POST", "JSON", false);

      if (res.message)
      {
        alert(res.message);
      }

      if(res.id && (res.act == 'goods_auto' || res.act == 'article_auto'))
      {
          document.getElementById('del'+res.id).innerHTML = "<a href=\""+ thisfile +"?goods_id="+ res.id +"&act=del\" onclick=\"return confirm('"+deleteck+"');\">"+deleteid+"</a>";
      }

      obj.innerHTML = (res.error == 0) ? res.content : org;
    }
    else
    {
      obj.innerHTML = org;
    }
  }
}

通過我們觀察這個函數(shù)的寫法，得出這個函數(shù)的意思，創(chuàng)建一個可編輯區(qū)域，然后在鼠標(biāo)失去焦點的時候執(zhí)行Ajax.call這個函數(shù)。那么Ajax.call這個函數(shù)又是是什么意思呢？我們看下他的寫法。

Ajax.call(listTable.url, "act="+act+"&val=" + encodeURIComponent(Utils.trim(txt.value)) + "&id=" +id, null, "POST", "JSON", false);

第一個參數(shù)是請求的URL地址，第二個參數(shù)是發(fā)送參數(shù)，第三個參數(shù)是執(zhí)行的回調(diào)函數(shù)，第四個參數(shù)是響應(yīng)類型，第五參數(shù)是是否異步請求。

我們通過這個函數(shù)就能實現(xiàn)ecshop的ajax調(diào)用了。

        在濟(jì)南網(wǎng)站建設(shè)中，ecshop是我們經(jīng)常用到的，我們在進(jìn)行二次開發(fā)的時候，一定要把經(jīng)常用的東西全部都弄懂了才能在下次開發(fā)中更好更快速的解決。ecshop后臺ajax無刷新修改商品數(shù)量原理就這些。本文由濟(jì)南騰飛網(wǎng)絡(luò)發(fā)布，轉(zhuǎn)載請注明。http://news.jpx001.cn