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

一、演示效果圖：

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

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

/**
 * 創(chuàng)建一個(gè)可編輯區(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)建一個(gè)輸入框 */
  var txt = document.createElement("INPUT");
  txt.value = (val == 'N/A') ? '' : val;
  txt.style.width = (obj.offsetWidth + 12) + "px" ;

  /* 隱藏對(duì)象中的內(nèi)容，并將輸入框加入到對(duì)象中 */
  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ū)失去焦點(diǎn)的處理函數(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;
    }
  }
}

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

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

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

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

        在北京網(wǎng)站建設(shè)中，ecshop是我們經(jīng)常用到的，我們?cè)谶M(jìn)行二次開發(fā)的時(shí)候，一定要把經(jīng)常用的東西全部都弄懂了才能在下次開發(fā)中更好更快速的解決。ecshop后臺(tái)ajax無刷新修改商品數(shù)量原理就這些。

上一篇：如何判斷網(wǎng)站設(shè)計(jì)的好壞 北京網(wǎng)站建設(shè)中 網(wǎng)站設(shè)計(jì)是前臺(tái)直接展示給用戶的界面

下一篇：北京網(wǎng)站建設(shè)中 beescms前臺(tái)支持php語句的方法