0

我正在尝试创建一个 javascript 框架，在其中我可以使用户能够在其帐户中的电子商务网站中存储项目、描述、价格等，以供将来参考。我尝试这样做的方法是在每个显示“保存项目”的项目旁边创建一个按钮，以 JSON 的形式获取项目详细信息并将其发送到 API，用户稍后可以访问它。

到目前为止，我遇到了一些基本的设计问题：

假设 JSON 只有四个字段 - 1) 商品名称 2) 商品价格 3) 商品描述 4) 零售商商品 URL

1) 我如何存储四个字段并将它们分配给一个 HTML 按钮 - 我采用的方法是创建一个类来检测按钮的类型，但我将页面所有项目的详细信息存储在一个数组并获取单击的按钮项目详细信息，将其放入 json 并使用 jQuery 发出发布请求

2) 一些研究表明 KnockoutJS 可以提供帮助。显然我可以将 json 存储为项目的 HTML 按钮的属性。那安全吗？

3) 你如何将 API 密钥（每个电子商务零售商唯一的）与 JSON 一起传递给 API？

我是 JavaScript 新手，任何帮助将不胜感激！

4

2 回答 2

2

试试这个http://tinker.io/37211

项目 HTML 

<table border="1" cellpadding="5">
 <tr>
    <td> Product 1 </td>
    <td>
        <button type="button" class="SaveItemButton"
        data-item-name="Product 1" data-item-price="1" data-item-description="Description 1" data-retailer-item-url="URL 1">
            Save Item
        </button>
    </td>
 </tr>
 <tr>
    <td> Product 2 </td>
    <td>
        <button type="button" class="SaveItemButton"
        data-item-name="Product 2" data-item-price="2" data-item-description="Description 2" data-retailer-item-url="URL 2" />
            Save Item
        </button>
    </td>
 </tr>
</table>

包括 JavaScript

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 <script>
    (function($){ 
        window.SomeApiKey = '';

        // This is the JS file contents which will be saved as file somewhere and included like the jQuery library above
        $(document).ready(function(){
            $('.SaveItemButton').click(function(){

                var btn = $(this);

                // colect data
                var data = {'item-name': btn.data('item-name'),  
                            'item-price': btn.data('item-price'), 
                            'item-description': btn.data('item-description'), 
                            'retailer-item-url': btn.data('retailer-item-url'), 
                            'api-key': window.SomeApiKey};

                // this line just for testing
                alert(' will send :' + $.param( data ) );   

                // do JSONP request
                $.ajax({
                   type: "GET",
                   url: "http://www.site.com",
                   dataType: "jsonp",
                   data: data
                }).done(function( msg ) {
                   alert( msg );
                });

                return false;
            });
        });

     })(jQuery);  
 </script>

  <script>
    // here the client will set APIkey to use
    window.SomeApiKey = 'APIKEY';
 </script>
于 2013-08-14T05:23:05.310 回答
1

如果要附加数据，请使用 HTML5 的 data 属性并从 JQUery 中获取数据，如下所示：

<button id="myButtonId" data-ItemName="your value" data-ItemPrice="10.00" data-ItemDescription="Your description" >Your button</button>

然后使用 JQuery，您可以检索数据或设置数据，请参阅主题的 JQuery 手册：

http://api.jquery.com/jQuery.data/

于 2013-08-14T05:28:29.247 回答