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，但它向我显示了这样的输出 enter image description here

<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中对该数组进行迭代，构建您的选项选择项并将其附加到选择框。

如何在.js文件中动态创建的html元素上调用php函数

2 个答案:

JavaScript：

PHP代码（文件名为：getOffer.php）