Php javascript-如何将json数据分配给HTML元素并发送到API onclick？
我正在尝试创建一个javascript框架，在这个框架中，我可以让用户在他们的帐户中存储电子商务站点中的项目、描述、价格等，以供将来参考。我尝试这样做的方式是在每个项目旁边创建一个按钮，上面写着“保存项目”，以JSON的形式获取项目详细信息，并将其发送到API，用户可以在以后访问它 到目前为止，我一直在思考一些基本的设计问题： 假设JSON只有四个字段-1）ItemName 2）Item Price 3）Item Description 4）Retailer Item URL 1） 我如何存储这四个字段并将它们分配给HTML按钮？我采用的方法是创建一个类来检测按钮的类型，但我将页面所有项目的详细信息存储在一个数组中，并获取单击的按钮项目详细信息，将其放入json中，并使用jQuery发出post请求 2） 一些研究表明，KnockoutJS可以有所帮助。显然，我可以将json存储为该项的HTML按钮的属性。安全吗 3） 如何将API密钥（对于每个电子商务零售商都是唯一的）和JSON一起传递给API 我是JavaScript新手，非常感谢您的帮助 试试这个 项目HTMLPhp javascript-如何将json数据分配给HTML元素并发送到API onclick？,php,javascript,jquery,html,Php,Javascript,Jquery,Html,我正在尝试创建一个javascript框架，在这个框架中，我可以让用户在他们的帐户中存储电子商务站点中的项目、描述、价格等，以供将来参考。我尝试这样做的方式是在每个项目旁边创建一个按钮，上面写着“保存项目”，以JSON的形式获取项目详细信息，并将其发送到API，用户可以在以后访问它 到目前为止，我一直在思考一些基本的设计问题： 假设JSON只有四个字段-1）ItemName 2）Item Price 3）Item Description 4）Retailer Item URL 1） 我如何存储这
<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>
产品1
保存项目
产品2
保存项目
<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>
（函数（$）{
window.SomeApiKey=''；
//这是JS文件的内容，它将被保存为某个地方的文件，并包含在上面的jQuery库中
$（文档）.ready（函数（）{
$（'.SaveItemButton'）。单击（函数（）{
var btn=$（本）；
//收集数据
var data={'item-name'：btn.data（'item-name'），
“项目价格”：btn.data（“项目价格”），
“项目描述”：btn.data（“项目描述”），
“零售商商品url”：btn.data（“零售商商品url”），
“api键”：window.SomeApiKey}；
//这条线只是用来测试的
警报（'将发送：'+$.param（数据））；
//是否执行JSONP请求
$.ajax({
键入：“获取”，
url:“http://www.site.com",
数据类型：“jsonp”，
数据：数据
}).done（函数（msg）{
警报（msg）；
});
返回false；
});
});
})（jQuery）；
//在这里，客户端将设置要使用的APIkey
window.SomeApiKey='APIKEY'；
<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>
产品1
保存项目
产品2
保存项目
<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>
（函数（$）{
window.SomeApiKey=''；
//这是JS文件的内容，它将被保存为某个地方的文件，并包含在上面的jQuery库中
$（文档）.ready（函数（）{
$（'.SaveItemButton'）。单击（函数（）{
var btn=$（本）；
//收集数据
var data={'item-name'：btn.data（'item-name'），
“项目价格”：btn.data（“项目价格”），
“项目描述”：btn.data（“项目描述”），
“零售商商品url”：btn.data（“零售商商品url”），
“api键”：window.SomeApiKey}；
//这条线只是用来测试的
警报（'将发送：'+$.param（数据））；
//是否执行JSONP请求
$.ajax({
键入：“获取”，
url:“http://www.site.com",
数据类型：“jsonp”，
数据：数据
}).done（函数（msg）{
警报（msg）；
});
返回false；
});
});
})（jQuery）；
//在这里，客户端将设置要使用的APIkey
window.SomeApiKey='APIKEY'；
<button id="myButtonId" data-ItemName="your value" data-ItemPrice="10.00" data-ItemDescription="Your description" >Your button</button>
您的按钮
如果要附加数据，请使用HTML5的数据属性，并从JQUery获取如下数据：
<button id="myButtonId" data-ItemName="your value" data-ItemPrice="10.00" data-ItemDescription="Your description" >Your button</button>
您的按钮
您可以使用jQuery将JSON（以及所有额外的内容）传递到您的服务器，然后让您的服务器将其发送到外部服务器。当然，您可以使用HTML标记中字段的数据构建JSON。模拟一些HTML和JSON，并尝试调用
$.ajax$.ajax