已使用已弃用的功能/尝试读取 null 上的属性“#”

问题描述 投票：0回答：1

我试图在单击它们时输出不同的选项。 理想情况下，图像、名称和价格应根据我单击的选项进行更改。 请看下面的链接。

img1

但是，一旦我单击选项，图像为空白，名称不变，价格显示“NaN”

img2

我也调查了apache错误

apache error

这是上面img1和img2的php文件 里面有Ajax脚本。




</head>

<body id="body">
<body style="background-color: beige;">

<?php session_start();
include '../../includes/dbh.localhost.php';
if(!$_SESSION['AUID']){
    echo "<script>alert('권한이 없습니다.');history.back();</script>";
    exit;
}


$pid  = isset($_GET['pid']) ? $_GET['pid'] : '';

$query="SELECT * from 제품 where pid=".$pid;
$result = $conn->query($query) or die("query error => ".$conn->error);
$rs = $result->fetch_object();


$query2="SELECT * from 제품옵션 where cate='컬러' and pid=".$pid;
$result2 = $conn->query($query2) or die("query error => ".$conn->error);
while($rs2 = $result2->fetch_object()){
    $options1[]=$rs2;
}


$query2="SELECT * from 제품옵션 where cate='사이즈' and pid=".$pid;
$result2 = $conn->query($query2) or die("query error => ".$conn->error);
$options2= [];
while($rs2 = $result2->fetch_object()){
    $options2[]=$rs2;
}

?>
<style>
    .col{
        border: 1px solid #f1f1f1;
    }

    [type=radio] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    [type=radio] + span {
        cursor: pointer;
    }
    [type=radio]:checked + span {
        outline: 3px solid indigo;
    }
</style>

<section class="signin-page">
  <div class="container">
    <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
        <div class="block text-center" style="background-color:#FFFFF0;">
         <div class="signinlogo">
         <div class="logo text-center">
                <a href="../../index.php"><tspan x="70.94" y="325">Sutra Craft</tspan></a>
            </div>

<div class="container">
  <div class="row">
    <div class="col" style="text-align:center;">
      <img id="pimg" src="<?php echo $rs->thumbnail;?>" style="max-width:200px;">
    </div>
    <div class="col">
      <h3><?php echo $rs->name;?></h3>
        <div>
          가격 : <span id="price"><?php echo number_format($rs->price);?></span>원
        </div>
        <?php if($options1){?>
        <br>
        
        <br>
        <div>
        <?php 
        
        foreach($options1 as $op1){?>
                <input type="radio" name="poption1" id="poption1_<?php echo $op1->poid;?>" value="<?php echo $op1->poid;?>">
                    <span  onclick="jQuery('#poption1_<?php echo $op1->poid;?>').click();" style="content: url('<?php echo $op1->image_url;?>');height:100px;width:100px;"></span>
                </input>
            <?php }?>
           
        </div>
        <br>
        <div>
            <?php 
           
            foreach($options2 as $op2){
                $option_name=$op2->option_name;
                if($op2->option_price)$option_name.="(+".number_format($op2->option_price).")";
                ?>
                <input type="radio" name="poption2" id="poption2_<?php echo $op2->poid;?>" value="<?php echo $op2->poid;?>">
                    <span  onclick="jQuery('#poption2_<?php echo $op2->poid;?>').click();"><?php echo $option_name;?></span>
                </input>
            <?php }?>
           
        </div>
        <?php }?>
    </div>
  </div>
 
</div>



<script>

    $("input[name='poption1']:radio,input[name='poption2']:radio").change(function () {
        var poid1 = $('input:radio[name="poption1"]:checked').val();
        var poid2 = $('input:radio[name="poption2"]:checked').val();
        
        
        var data = {
            poid1 : poid1,
            poid2 : poid2
        };
            $.ajax({
                async : false ,
                type : 'post' ,
                url : 'option_change.php' ,
                data  : data ,
                dataType : 'json' ,
                error : function() {} ,
                success : function(data) {
                    //console.log(JSON.stringify(data));
                    var price=parseInt(data.option_price1)+parseInt(data.option_price2)+<?php echo $rs->price;?>;
                    $("#pimg").attr("src", data.image_url);
                    $("#price").text(number_format(price));
                }
        });
    });

    function number_format(num){
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',');
    }

    $("#poption").change(function(){
        var poid = $("#poption option:selected").val();
       
        var data = {
            poid : poid
        };
            $.ajax({
                async : false ,
                type : 'post' ,
                url : 'option_change.php' ,
                data  : data ,
                dataType : 'json' ,
                error : function() {} ,
                success : function(data) {
                    var price=parseInt(data.option_price)+<?php echo $rs->price;?>;
                    $("#pimg").attr("src", data.image_url);
                    $("#price").text(number_format(price));
                }
        });
    });
</script>

这是 AJAX 的 option_change.php 

<?php session_start();
include '../../includes/dbh.localhost.php';
ini_set( 'display_errors', '0' );

$poid  = isset($_POST['poid']) ? $_POST['poid'] : '';

$query="SELECT * from 제품옵션 where poid='".$poid."'";
$result = $conn->query($query) or die("query error => ".$conn->error);
$rs = $result->fetch_object();
$image_url = $rs->image_url;
$option_price = $rs->option_price;

$data = array("image_url"=>$image_url,"option_price"=>$option_price);
echo json_encode($data);

?>

我知道它有很多代码，但是如果你可以的话请帮忙。

javascript php ajax
1个回答
0
投票

您的代码存在很多问题（漏洞、格式等）。但我只会向您指出我认为您感兴趣的方向：

首先：

$("#poption").change
永远不会被触发，因为没有id为“poption”的输入。你应该删除它。

第二：

$("input[name='poption1']:radio,input[name='poption2']:radio").change
可能会被触发，但你的ajax代码发布poid1和poid2，而不是你的option_change.php期望的poid。 我不知道你为什么在输入中输入不同的名称。你应该输入相同的名字，就像这样：

输入类型=“无线电”名称=“poption”id=“poption1_poid;?>”值=“poid;?>”

和

输入类型=“无线电”名称=“poption”id=“poption2_poid;?>”值=“poid;?>”>

然后根据该名称修改 JQuery on Change 事件：

input[name='poption']:radio
。在事件内部，将值存储在数据对象中，如下所示：

var poid = $('input:radio[name="poption"]:checked').val();

var data = {
            poid : poid
        };
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.