如何通过php-mysql查询获得javascript中的数据
how to get data in javascript passed through php mysql query
我想在选择框中显示700个产品数据,每次选择时我都必须打印一个描述表。之前我进行ajax调用并显示数据,但过程很慢。因此,我必须将所有数据发送到客户端,然后使用javascript更改选项更改的描述表。下面是我的代码
<?php
$data = json_encode( get_data_from_db() );
?>
<input type='hidden' name='data' id='data' value= " <?php echo $data; ?>" />
当我在jquery 中进行警报时
alert( $("#data").val() );
我只看到
{[
警报中的值,但当我在浏览器上打印数据时,它确实以json格式打印
我如何在javascript中获取这些数据,然后我必须使用循环来提取针对特定id的数据,并从中提取ul li,然后嵌入它。请建议正确的方法以及警报的错误之处。感谢
另一个解决方案-不创建全局变量,而是将该数据设置为某个相关元素的data-
属性。不要忘记对整个数组/对象执行json_encode()
,然后对结果字符串执行htmlspecialchars()
(正如其他人所指出的,缺少htmlspecialchars()
是在提醒输入字段值时只得到"{["的原因)。不要忘记在调用htmlspecialchars()
时指定ENT_QUOTES
,否则如果任何值包含撇号字符,则可能会得到无效结果。
<?php
$users = array(
array('name' => 'Average', 'surname' => 'Joe'),
array('name' => 'Average', 'surname' => 'Jane'),
array('name' => 'Joe', 'surname' => 'Sixpack'),
array('name' => 'John', 'surname' => 'Doe'),
array('name' => 'Hong', 'surname' => 'Gildong'),
array('name' => 'Foo', 'surname' => 'Bar'),
);
?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
</head>
<body data-users='<?php echo htmlspecialchars(json_encode($users), ENT_QUOTES); ?>'>
<script type='text/javascript'>
$(function() {
var users = $(document.body).data('users');
for ( var n in users ) {
$('<div/>').text(users[n].name + ' ' + users[n].surname).appendTo(document.body);
}
});
</script>
</body>
</html>
这使得6个<div/>
元素以所有的名称和姓氏作为其内容。
您遇到的问题是在value
属性周围使用双引号,但JSON输出中的所有键和字符串当然都用双引号,第一个双引号终止了HTML中的value
属性。
不要将$data
输出为隐藏元素的值。相反,将其输出到JavaScript变量:
<script>
var products_data = <?php echo $data; ?>;
</script>
然后您可以直接在JavaScript中使用products_data
。(如图所示,它是一个全局变量,这并不理想;如果你可以将它包含在一个范围函数中,那会更好,但这取决于你的脚本等的组织方式。)
这是因为JSON是JavaScript对象文字格式的子集,所以有效的JSON也是内联定义对象的有效JavaScript。你的PHP会生成这样的东西并将其发送到浏览器:
<script>
var products_data = {
"products": [
{"id": 427, "name": "WonderWidget", "price": 27.99},
{"id": 429, "name": "CoolNiftyThing", "price": 19.99}
]
};
</script>
显然,确切的结构将取决于您的服务器端$data
对象。
原因是json编码的数组是这样格式化的:{[ "value1","value2",...]}
,因此,当您echo
"value"字段内的字符串时,json中的第一个双引号字符串关闭隐藏输入的值属性
为了解决这个问题,你可以做一些类似的事情
<script>
var myData = <?php echo json_encode( get_data_from_db() ); ?>
</script>
@T.J.Crowder对钱有正确的答案。
您在发布的示例中看到奇怪行为的原因可能是您的json_encode
早期有双引号,并且在没有转义符
最好的方法是不要将JSON结构直接回显到脚本中(这可能会使您面临htmlspecialchars
可能无法保护您的XSS问题)。
我建议您执行以下操作:
<script type="text/plain" id="json_data">
<?php echo html_special_chars(json_encode($data)); ?>
</script>
<script>
var myData = $.parseJSON($("#json_data").text());
</script>
JSON是而不是Javascript,不应被视为这样。
notval()使用text()
alert($("#data").text());
- JavaScript数据结构
- 父级对子 JavaScript 数据的访问
- 更改动态 JavaScript 数据
- Javascript 数据可用事件
- 将javascript数据放入表单中
- 将json结构转换为可用的javascript数据集
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- 数值的 JavaScript 数据类型
- 使用 ajax 将 JavaScript 数据传输到 PHP
- Javascript数据将元素属性绑定到URL中的锚href
- 整页回发和javascript数据
- 如何使用javascript数据对象?如何通过变量访问条目
- 如何将从数据库中提取的数字传递到javascript数据部分
- Spring MVC与Google图表,创建javascript数据表的最佳方式是什么
- JavaScript 数据中的 XSS
- 无法将我的 JavaScript 数据填充为 HTML
- 如何将相同的 JavaScript 数据传递给 HTML 两种不同的方式
- JavaScript 数据结构,JS中的ArrayList(Java)
- 将 casper javascript 数据插入 CSV 文件
- 用于高效插入和搜索的 Javascript 数据结构