AJAX将返回的数据分离到特定的div中
AJAX代码:AJAX将返回的数据分离到特定的div中,ajax,parsing,variables,html,Ajax,Parsing,Variables,Html,AJAX代码: <script type="text/javascript"> function doCalc(){ var roomX = $('#room_str').val(); var heightX = $('#height_str').val(); var widthX = $('#width_str').val(); var prodi
<script type="text/javascript">
function doCalc(){
var roomX = $('#room_str').val();
var heightX = $('#height_str').val();
var widthX = $('#width_str').val();
var prodid = $('#prodid').val();
var qtyX = $('#qty_str').val();
$.post('db_query.php',
{qtyX:qtyX, roomX:roomX, heightX:heightX, widthX:widthX, prodid:prodid},
function(data) {
data = $.parseJSON(data);
$('#width-placeholder').html(data.width);
$('#height-placeholder').html(data.height);
// ...
});
return false;
};
</script>
函数doCalc(){
var roomX=$('#room_str').val();
var heightX=$('#height_str').val();
var widthX=$('#width_str').val();
var prodid=$('#prodid').val();
变量qtyX=$('qty_str').val();
$.post('db_query.php',
{qtyX:qtyX,roomX:roomX,heightX:heightX,widthX:widthX,prodid:prodid},
功能(数据){
data=$.parseJSON(数据);
$('#宽度占位符').html(data.width);
$('#height placeholder').html(data.height);
// ...
});
返回false;
};
PHP代码:
<?php
include('db_pbconnection.php');
$query = mysql_query(" SELECT * FROM price_dimensions WHERE prodid = '".$_POST['prodid']."' AND height >= '".$_POST['heightX']."' AND width >= '".$_POST['widthX']."' ORDER BY height ASC, width ASC LIMIT 1 ");
$results = array();
$row = mysql_fetch_array($query);
$results = array(
'width' => $row['width'],
'height' => $row['height'],
'price' => $row['price']
);
$json = json_encode($results);
echo $json;
?>
编辑:多亏了Alex,更新后的代码成功运行。这使用json_encode将数据发送回,并能够将每个SQL行分配给已标识的占位符。这只是为了防止您需要在布局中单独移动数据 如果我没弄错的话,您尝试对来自AJAX请求的HTML数据应用选择器。对我认为jQuery在这里帮不了你 一个选项可能是将此div结构作为带有占位符的模板已存在于页面上。AJAX调用应该以JavaScript本机可解析格式返回数据。PHP有一个函数,可以为您生成JSON-。从服务器获取JSON后,可以执行以下操作:
function(data) {
data = $.parseJSON(data);
$('#width-placeholder').html(data.width);
$('#height-placeholder').html(data.height);
// ...
});
return false;
};
这部分(data.width)是否表示“width”是php数据库值?我正在学习json_encode,我假设这就是将我的SELECT查询转换为上述代码的可用数据的原因?我是否需要在脚本中使用“success:”来显示结果?或者这是因为您的代码以某种方式将检索到的数据分配给了一个数组吗?如果您
json\u encode
像array('width'=>500,'height'=>200,…)
,那么在JS中您可以使用data.width
。因此,请检查sql查询返回的内容(var\u dump
it)。是的,您需要success
callback,因为AJAX调用是异步的(或者您可以使用$.post(url、数据、successCallback)
)。多亏您的帮助,在一周的混乱之后,我几乎可以完成这项任务并睡觉了。你的答案很清楚。我已经添加了新的修改,但仍然不起作用。我感觉php页面和ajax脚本之间有一个标记、值或标签不匹配。这是打字错误吗?你忘了echo$json
使其工作(在最后)。并且您的$results
应该以其他方式填充。您只选择一行,因此无需在循环时使用。我马上建议编辑。