php 與 jquery中$.post()與attr()方法的簡單實例 amaze modal 模態窗口

$(selector).attr(attribute,value)
$.post()

在jqery中有這樣一個方法，$.post()下面就這個方法作一個簡單的實例：

jQuery.post( url, [data], [callback], [type] ) ：
使用POST方式來進行異步請求

參數：

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給服務器的數據，以 Key/value 的鍵值對形式表示。

callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)。

type (String) : (可選)官方的說明是：Type of data to be sent。其實應該爲客戶端請求的類型(JSON,XML,等等)

<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="#true" onclick="set('true')">出售中</a></li>
<li><a  href="#false" onclick="set('false')"
       class="<{if $status =='false'}>am-text-danger<{/if}>">已下架</a></li>
</ul>　　'#email').val(),address:$('#address').val()},

<script type="text/javascript">
    function set(value){
        $.post("<{link app=subsales ctl=wap_subshop act=products}>", { type: value},
                function(data){
                }, "json");
    }
</script>

  <button type="button" class="am-btn am-btn-primary js-modal-open">打開 Modal</button>
  <button type="button" class="am-btn am-btn-secondary js-modal-close">關閉 Modal</button>
  <button type="button" class="am-btn am-btn-danger js-modal-toggle">Toggle Modal</button>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="your-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Modal 標題
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
      Modal 內容。
    </div>
  </div>
</div>
<script>
  $(function() {
    var $modal = $('#your-modal');

    $modal.siblings('.am-btn').on('click', function(e) {
      var $target = $(e.target);
      if (($target).hasClass('js-modal-open')) {
        $modal.modal();
      } else if (($target).hasClass('js-modal-close')) {
        $modal.modal('close');
      } else {
        $modal.modal('toggle');
      }
    });
  });
</script>

彈框效果

上述代碼是amaze ui裏的一個彈窗效果，該功能符合要求。

問題。如今對每一個商品中《推廣》要求都有彈窗效果，由於每一個產品都有不同的id，因此上述js須要進行處理，每一個產品推廣，都寫一個js？，答案確定是no，思考，如何高效，只用一個js方法來實現呢？
方法，由於每一個產品的id不同因此能夠，那個產品須要請求彈框就須要發送一次請求，異步處理，後臺輸出產品所對應的信息
代碼
後臺代碼：根據產品id來獲取產品對應的信息

   //生成二維碼
    function qrcode_image()
    {

        $product_id = $_POST['product_id'];
        // $url ="http://www.taifengmall.com".$this->gen_url(array('app' => 'subsales', 'ctl' => 'wap_subshop', 'act' => 'product', 'args' => array($product_id)));
        $url =  kernel::base_url(1).$this->gen_url(array('app' => 'subsales', 'ctl' => 'wap_subshop', 'act' => 'product', 'args' => array($product_id)));
        $qrcode_image_id = kernel::single('weixin_qrcode')->generate($url, '10');
        $img = base_storager::image_path($qrcode_image_id, 's');
        echo   $img;

    }

html 代碼 

問題：例如< img id="xxx" src=" xxx"/> 其中如何替換src圖片的連接呢？

方法，$(selector).attr(attribute,value)設置被選元素的屬性和值

<a data-am-modal="{target: '#q-img-modal'}" class="am-btn am-btn-xs" href="javascript:;" onclick="setimg('<{$product.product_id}>')">
  推廣
</a>
<div class="am-popup" id="q-img-modal">
    <div class="am-popup-inner">
        <div class="am-popup-hd">
            <h4 class="am-popup-title">長按二維碼圖片保存發送</h4>
            <span data-am-modal-close class="am-close">&times;</span>
        </div>
        <div class="am-popup-bd am-text-center">
            <img id="t-img" src="" class="am-img-responsive"/>
        </div>
    </div>
</div>
<script type="text/javascript">

    function setimg(value){

        $.post("<{link app=subsales ctl=wap_subshop act=qrcode_image}>", { product_id:value},
                function(data){
                    $('#t-img').attr('src',data);//替換代碼信息
                    $('#q-img-modal').modal(options);//彈窗
                }, "text");
    }

    function set(value){
        $.post("<{link app=subsales ctl=wap_subshop act=products}>", { type: value},
                function(data){
                }, "json");
    }
</script>

效果