javascript - 使用php从mysql中选择数据，显示在html下拉列表中，并通过javascript插入所选值作为URL参数

Question

首先，请理解我在过去10天内才刚刚开始学习php，javascript和ajax，因此我将需要一些帮助以及逐步的示例和指南。我已经仔细阅读了w3schools中有关这些主题的课程，发现它们非常有帮助；结果，我可以使用在这里和其他站点找到的示例和其他代码片段为项目编写一些基本代码。

这篇文章有点冗长，所以我可以解释我对于此代码的最终目标以及我已经尝试过的内容。

我已经开始编写一段包含多个部分的非常复杂的代码，但是最终结果将是一个下拉选择列表，其中该页面的main_image的图像缩略图按钮链接到外部URL，该URL根据用户的下拉列表动态创建列表选择。

这是我的项目：

我正在使用Joomla 3.xx，Bootstrap 3和j2store（以及其他组件和模块）构建一个网站，其中包含出售的照片作为数字图像，并且可以应用于实物产品（画布打印，T恤，咖啡杯等） ）。这些物理产品存在于第三方网站（Zazzle）上，该网站与Zazzle的RSS feed和另一个第三方javascript代码一起嵌入我的私人网站中（以将Zazzle RSS feed网格显示嵌入到我的网站中）。

Zazzle API允许我的用户从我的私人网站上选择任何图像，并将该图像应用于Zazzle市场中的任何产品。

我的用户最终会从我网站上的下拉列表中选择一种产品类别，然后单击一个按钮，该按钮将打开一个新窗口以连接到Zazzle市场，该市场将显示相关实体产品的网格，其中包含活动页面上显示的图像用户点击该按钮的网站上。

例如，用户首先查看我网站上的main_image“浅紫色非洲雏菊”页面，然后从下拉列表中选择电子产品类别，然后单击“设计自己的礼物”按钮，这将打开一个新窗口，连接到Zazzle市场，并显示电子产品网格，在用户选择的产品上显示“浅紫色非洲雏菊”图像。

用户从我的网站上的下拉列表中选择产品类别后，需要使用选定的值动态创建“设计自己的礼物”按钮后面的URL。

这是我需要使用的Zazzle API：

https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg= <DYNAMIC CATEGORY ID FROM DROPDOWN SELECTION LIST> &t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid= <URLENCODED DYNAMIC PATH OF ACTIVE PAGE MAIN_IMAGE>"

我在mysql数据库中创建了2个表，其中包含Zazzle市场中产品的名称，类别ID和部门ID。我还从我的j2store productimages表中获取了main_image路径。

到目前为止，我已经能够编写的代码可以完成以下任务：


连接到数据库
选择列/表
从列/表中获取数据
创建HTML表单以显示MYSQL查询的结果
创建查询结果的下拉选择列表
具有Zazzle API的Echo编码URL与参数/动态值的组合


到目前为止，这是我的代码：

 <div class="form-group" style="margin: 30px 10%;">
<h3>Create Zazzle Products</h3><p><h4>Select a Template Category</h4>
<form name="create-zproducts" id="create-zproducts" action="create-zproduct.php" method="POST">
    <?php
                //connection
                $con = mysqli_connect('localhost', 'user', 'password', 'database');
                if (!$con) {
                    die('Could not connect: ' . mysqli_error($con));
}
                $sql="SELECT * FROM david_cim_template_categories, david_j2store_productimages";
                $cg = $_GET['cim_template_cg'];
                $coverimage_iid = $_GET['main_image'];
                $result = mysqli_query($con,$sql);
    ?>
    <select name="selectZcategories" id="selectZcategories">
    <?php
    while($row = mysqli_fetch_array($result)) {
        echo '<option value="'.$row['cim_template_cg'].':'.$row['cim_template_cgname']'">'.$row['cim_template_cgname'].'</option>';
    }
    ?>
    </select>
    <button onclick="ajaxFunction();">Submit</button><br /><br />

<?php

    <script>

    function ajaxFunction() {
        var selectedData=$("#selectZcategories option:selected").val();

   $.ajax({
      type : "POST",
      url: "select_zproduct.php",
      data: { selection : selectedData },
      success: function (html) {
          //Success handling
      }
   })
}   
    </script>

?>

<?php
    echo $ZAPI = "https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg=";
    echo $cg = ['cim_template_cg'];
    echo $ZPARAM = "&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid=https%3A%2F%2Fwww.capturedimagesofmaine.com%2Fimages%2Fproducts%2Foriginal%2F";
    echo $coverimage_iid = ['main_image'];
    echo $product_text = "&t_text1_txt=Welcome";
?>
</form>
</div>

// new file (select_zproduct.php) added to same path as create_zproduct.php
// contents of select_zproduct.php below:
<?php
if( isset($_POST['selection']) )
{
   $selecterData=$_POST['selection'];
   $selecterArrayData=explode(':', $selecterData);

   $cg=$selecterArrayData[0];
   $coverimage_iid=$selecterArrayData[1];

   $url='https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg='.$cg.'&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid='.$coverimage_iid.'';
   ?>
   <script>
      window.location.href=<?php echo $url; ?>;
   </script>
   <?php
}
?>

到目前为止，以上代码只是我自己能够编写的内容的开始。

目前，我的障碍是无法使“ cg =”参数显示用户从下拉列表中选择的$ cg =数值。当前代码在URL中返回单词“ Array”，而不是所选值。 （例如，cg = Array而不是cg = 196215449301144739）

我相信我需要使用AJAX和Javascript来完成此操作，但我还不知道自己编写它。

我需要编写的代码将完成以下任务：


为URL片段（$ ZAPI，$ cg等）分配适当的$ variables以进行串联
将适当的$ variables分配给数据库下拉菜单SELECTION Result，以在上面的URL中使用
连接所有$ variables
解析所有$ variables
将最终编码的URL嵌入按钮
使用活动页面main_image的缩略图作为按钮图像src


我现在需要知道的是如何将'cim_template_cg'的数值插入最终URL的“ cg =”参数中，以便当用户选择关联的'cim_template_cgname'时最终URL将输出“＆cg = 196215449301144739”那个cg =。

一旦看到解决方案，便可以将其应用于需要创建的其他动态值。我仅在一个代码段的帮助下编写了一个javascript代码，因此，需要在示例中向我展示任何需要编写的AJAX或Javascript代码，并描述相关文件。

感谢您的帮助！

Answer 1

因此，如果我正确理解了您的问题，那么您就有必要的数据来实现此目的，即您具有数据库的URL路径和ID以及URL字符串，这些字符串需要在选择时动态添加这些数据库值？

要回答您的问题之一，是的，如果您希望将PHP逻辑处理在单独的文件中，则可以通过AJAX完成。

您可以做的是将数据库中的URL路径和ID与分隔符值连接起来，可以对它执行explode();来获取这些值。

因此，您的<select>看起来像这样：

<select name="selectZcategories" id="zCategories">
  <?php
  while($row = mysqli_fetch_array($result)) {
    echo '<option value="'.$row['cim_template_cg'].':'.$row['cim_template_cgname'].'">'.$row['cim_template_cgname'].'</option>';
  }
  ?>
</select>

现在到AJAX功能。我个人使用jQuery库，只是因为它使事情变得简单。它简化了许多代码，因此我将在我的AJAX示例中按照jQuery标准进行操作。如果您希望使用jQuery AJAX来获得相同的结果，则需要像其他普通JS / CSS文件一样将jQuery安装到包含的库中。

function ajaxFunction() {
   var selectedData=$("#zCategories option:selected").val();

   $.ajax({
      type : "POST",
      url: "/path/to/file.php",
      data: { selection : selectedData },
      success: function (html) {
          //Success handling
      }
   })
}

这样实现的是，该函数将采用 <select>的选定值，并使用POST方法将数据解析到另一个文件。如果愿意，您可以在成功函数中做很多事情，但是出于我们的目的，我将仅在PHP文件中执行重定向。

将数据解析到另一个文件后，您可以对该值执行 explode();，将其拆分为两个变量，然后将它们在URL中进行解析。

PHP文件可能如下所示：

<?php
if( isset($_POST['selection']) )
{
   $selecterData=$_POST['selection'];
   $selecterArrayData=explode(':', $selecterData);

   $categoryID=$selecterArrayData[0];
   $imagePath=$selecterArrayData[1];

   $url='https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg='.$categoryID.'&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid='.$imagePath.'';
   ?>
   <script>
      window.location.href=<?php echo $url; ?>;
   </script>
   <?php
}
?>

最初如何调用AJAX函数由您决定。例如，可以通过按钮。

<button onclick="ajaxFunction();">Submit</button>

希望这对您有所帮助，或为您指明了正确的方向。

对于根据您的评论要求的测试，

用于测试的Ajax：

function ajaxFunction() {
   var selectedData=$("#zCategories option:selected").val();

   $.ajax({
      type : "POST",
      url: "/path/to/file.php",
      data: { selection : selectedData },
      success: function (html) {
          //Success handling
          alert(html);
      }
   })
}

PHP：

<?php
    if( isset($_POST['selection']) )
    {
       $selecterData=$_POST['selection'];
       $selecterArrayData=explode(':', $selecterData);

       $categoryID=$selecterArrayData[0];
       $imagePath=$selecterArrayData[1];

       $url='https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg='.$categoryID.'&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid='.$imagePath.'';

       echo 'cg: '.$categoryID.' img path: '.$imagePath;
       ?>
       <script>
          //window.location.href=<?php echo $url; ?>;
       </script>
       <?php
    }
 ?>