濟南網站制作，ecshop后臺ajax無刷新修改商品數量原理分析。

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

一、演示效果圖：

二、無刷新修改商品數量實現方法：

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

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

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

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

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

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

  /* 編輯區輸入事件處理函數 */
  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;
    }
  }

  /* 編輯區失去焦點的處理函數 */
  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;
    }
  }
}

通過我們觀察這個函數的寫法，得出這個函數的意思，創建一個可編輯區域，然后在鼠標失去焦點的時候執行Ajax.call這個函數。那么Ajax.call這個函數又是是什么意思呢？我們看下他的寫法。

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

第一個參數是請求的URL地址，第二個參數是發送參數，第三個參數是執行的回調函數，第四個參數是響應類型，第五參數是是否異步請求。

我們通過這個函數就能實現ecshop的ajax調用了。

        在濟南網站建設中，ecshop是我們經常用到的，我們在進行二次開發的時候，一定要把經常用的東西全部都弄懂了才能在下次開發中更好更快速的解決。ecshop后臺ajax無刷新修改商品數量原理就這些。本文由濟南騰飛網絡發布，轉載請注明。http://www.wh-haojing.com