如何在.js文件中動態創建的html元素上調用php函數

Question

這是我的product.php文件，其中包含以下php函數

      <?php
       function getOfferName($conn,$companyID){
       $sql="SELECT `id`, `offer_name`, `offer_discount` FROM `oiw_product_offers` 
        WHERE `company_id`='$companyID'";
        if ($result=mysqli_query($conn,$sql)) {
          while ($row=mysqli_fetch_assoc($result)) {
          ?>
          <option value="<?php echo $row['id'] ?>"><?php echo $row['offer_name'] ?></option>
          <?php
           }
         }
       }
   ?>

這個product.php文件包含custom-js.js文件，在其中我正在動態創建html元素（選擇下拉列表）。

$('.offerCheckBox').on('change', function() { 
    var id=$(this).data('id');
    if (!this.checked) {
    var sure = confirm("Are you sure want to remove offer ?");
    this.checked = !sure;
    }else{
        $(this).parent().parent().append('<select name="" id=""><?php getOfferName($conn,$companyID) ?></select>');

    }
});

在這里，我調用php函數getOfferName，但它向我顯示了這樣的輸出， 在此處輸入圖像描述

<select name="" id=""><!--?php getOfferName($conn,$companyID) ?--></select>

Answer 1

你可以通過下面的代碼

getdata.php

if($_POST['action'] == 1){
    $companyID = $_POST['id'];
    $sql="SELECT `id`, `offer_name`, `offer_discount` FROM `oiw_product_offers` 
     WHERE `company_id`='$companyID'";
     if ($result=mysqli_query($conn,$sql)) {
       $html = '';
       while ($row=mysqli_fetch_assoc($result)) {
       $html .= '<option value="'.$row['id'].'">'.$row['offer_name'].'</option>';
        }
      }
      echo json_encode($html);
      exit(0);
    }

?>

Ajax調用以獲取數據

$('.offerCheckBox').on('change', function() { 
    var id=$(this).data('id');
    if (!this.checked) {
    var sure = confirm("Are you sure want to remove offer ?");
    this.checked = !sure;
    }else{

        $.ajax({
            url: "getdata.php",
            type: 'POST',
            data: {id:id,action:1},
            dataType: "json",
            contentType: false,
            cache: false,
            processData: false,
            success: function(response) {

                if (response) {

                    $(this).parent().parent().append('<select name="" id="">'+response+'</select>');

                } else {
                    //Error
                }

                return true;
            }
        });



    }
});

Answer 2

JavaScript文件位於客戶端，在此文件中編寫代碼將不會創建運行PHP文件的服務器調用。

如果要將JavaScript與服務器調用結合使用，則應使用ajax。

JavaScript：

 $('.offerCheckBox').on('change', function() { var id=$(this).data('id'); if (!this.checked) { var sure = confirm("Are you sure want to remove offer ?"); this.checked = !sure; } else { let fd = new FormData(); let companyID = $(this).val(); fd.append('companyID', companyID); $.ajax ({ url: "getOffer.php", type: "POST", data: fd, processData: false, contentType: false, complete: function (results) { let response = JSON.parse(results.responseText); my_function.call(this, response); } }); } }); // in this function you will put the append of the select box that php has created function my_function(response) { console.log("response", response); } 

PHP代碼（文件名為：getOffer.php）

   <?php

    $companyID = $_REQUEST['companyID'];
    $options = array[];

    $sql="SELECT `id`, `offer_name`, `offer_discount` FROM `oiw_product_offers` 
    WHERE `company_id`='$companyID'";
    if ($result=mysqli_query($conn,$sql)) {

        while ($row=mysqli_fetch_assoc($result)) {
                $options[$row['id']] = $row['offer_name'];    
        }
    }  

     $resBack = (json_encode($options, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE));
     echo ($resBack);  

？>

現在在上面我們寫的回調函數my_function中，您有一個來自PHP的鍵值對數組。 在JavaScript中對該數組進行迭代，構建您的選項選擇項並將其附加到選擇框。