Magento 首页 ajax 无限加载产品 js篇

注:
本模块用的是prototype.js 的库
Magento 版本1.9x

/*
*首页ajax 加载测试
*ajiang-tuzi 
*20160127
*www.weicot.com
*其实这个js部分比较简单
*/
<script type="text/javascript">
    var x=1;
    function sendRequest() {
        x=x+1;//页
        var url ="/shop-by-players.html?weicot_ajax2=true&p="+x;
        var mailAjax = new Ajax.Request(
            url,
            {
                method: 'get',
                onComplete: jsonResponse
            }
        );
    }

    function jsonResponse(originalRequest) {
        var json_return=originalRequest.responseText.evalJSON(true); //解析json
        new Insertion.Bottom('product_list',innerHTML=json_return.content); //写入html
    }
</script>
    <button type="button"  class="button green-button" onclick="sendRequest()">Show 20 more</button>

用到的prototype.js 库中的元素

The Insertion.Bottom class

Inherits from Abstract.Insertion

在给定元素最后一个子节点位置插入 HTML。内容将位于元素的结束标记的紧前面。

The following code

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>
<script> new Insertion.Bottom('person', " What's up?"); </script>

Will change the HTML to

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>

用到的 prototype.js 的库

/*
*首页ajax 加载测试
*ajiang-tuzi 
*20160127
*www.weicot.com
*其实这个js部分比较简单
*/
function unfilterJSON(filter) {
    return this.replace(filter || Prototype.JSONFilter, '$1');
  }

  function isJSON() {
    var str = this;
    if (str.blank()) return false;
    str = str.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@');
    str = str.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']');
    str = str.replace(/(?:^|:|,)(?:\s*\[)+/g, '');
    return (/^[\],:{}\s]*$/).test(str);
  }

  function evalJSON(sanitize) {
    var json = this.unfilterJSON(),
        cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
    if (cx.test(json)) {
      json = json.replace(cx, function (a) {
        return '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
      });
    }
    try {
      if (!sanitize || json.isJSON()) return eval('(' + json + ')');
    } catch (e) { }
    throw new SyntaxError('Badly formed JSON string: ' + this.inspect());
  }

  function parseJSON() {
    var json = this.unfilterJSON();
    return JSON.parse(json);
  }

参考与引用
JavaScript 处理和解析JSON数据

转载请注明：(●--●) Hello.My Weicot » Magento 首页 ajax 无限加载产品 js篇