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

首先，请理解，在过去的10天里，我刚刚开始学习php、javascript和ajax，因此我需要一些手牵手和逐步的示例和指导。我仔细阅读了W3学校关于这些主题的课程，发现它们非常有用；因此，我能够使用他们的示例和我在这里和其他站点找到的其他代码片段为我的项目编写一些基本代码

这篇文章有点长，所以我可以解释我对这段代码的最终目标以及我已经尝试过的东西

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

这是我的项目：

我正在使用Joomla 3.x.x、Bootstrap 3和j2store（以及其他组件和模块）构建一个网站，该网站以数字图像形式出售照片，并可应用于物理产品（帆布印花、t恤、咖啡杯等）。这些物理产品存在于第三方网站（Zazzle）上，该网站通过Zazzle的RSS提要和另一个第三方javascript代码嵌入到我的私人网站（将Zazzle RSS提要网格显示嵌入到我的网站）

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

我的用户最终会从我的网站上的下拉列表中选择一类产品，然后单击一个按钮，打开一个新窗口连接到Zazzle marketplace，该窗口将显示一个相关物理产品的网格，其特征是用户单击按钮的网站活动页面上显示的图像

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

“设计你自己的礼物”按钮后面的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>"

https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg=  &t_uuuseqpc=false&ed=true&t_uusmart=false&continuerl=https%3A%2F%2Fwww.zazzle.com%2capturedimagesmaine&tc=&ic=&t_ucoverimage\u iid=”

我已经在mysql数据库中创建了两个表，其中包含Zazzle marketplace中产品的名称、类别ID和部门ID。我还从我的j2store productimages表中获取主映像路径

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

连接到数据库

选择列/表

从列/表中获取数据

创建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
}
?>

创建Zazzle产品选择模板类别
提交


//新文件（选择zproduct.php）添加到与createzproduct.php相同的路径
//selectzproduct.php的内容如下：
window.location.href=；

上面的代码只是到目前为止我自己能够写的东西的开始

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

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

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

将适当的$变量分配给URL片段（$ZAPI、$cg等），以用于连接

将适当的$variables分配给要在上面的URL中使用的数据库下拉选择结果

连接所有$variables

解析所有$variables

将最终编码的URL嵌入到按钮中

使用活动页面主图像的缩略图作为按钮图像src

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

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

---

提前谢谢你的帮助

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

为了回答您的一个问题，如果您希望在单独的文件中处理PHP逻辑，可以通过AJAX来完成

您可以做的是，将数据库中的URL路径和ID与一个分隔符值连接起来，您可以执行

explode（）打开以获取值

因此，您的
看起来应该是这样的：

<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>

这样做的目的是
function ajaxFunction() {
   var selectedData=$("#zCategories option:selected").val();

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

<?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
}
?>

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

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
    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
    }
 ?>

<?php
/**
* @package J2Store
* @copyright Copyright (c)2014-17 Ramesh Elamathi / J2Store.org
* @license GNU GPL v3 or later
*
* Bootstrap 2 layout of product detail
*/
// No direct access
defined('_JEXEC') or die;
$db = JFactory::getDbo();
$query = $db->getQuery(true)->select('*')->from('#__cim_template_categories');
$db->setQuery($query);
$cg_values = $db->loadObjectList();
$image_path = JUri::root();
$main_image = $image_path.$this->product->main_image;

//$zazzle_api = 'https://www.zazzle.com/api/create/at-238500395169782226';
$zazzle_api = 'https://www.zazzle.com/api/create/at-238500395169782226';
?>
<?php if(count($cg_values)): ?>
<div class="cg_values">
  <form method="get" class="zazzle_api_form" action="<?php echo $zazzle_api; ?>">
    <select name="cg" class="cg">
      <?php foreach($cg_values as $cg_value): ?>
          <option value="<?php echo $cg_value->cim_template_cg; ?>">
            <?php echo $cg_value->cim_template_cgname; ?>
          </option>
      <?php endforeach; ?>
    </select>
    <input type="hidden" name="rf" value="238500395169782226" />
    <input type="hidden" name="ax" value="DesignBlast"  />
    <input type="hidden" name="sr" value="250508120301240636"  />
    <input type="hidden" name="t__useQpc" value="false"  />
    <input type="hidden" name="ed" value="true"  />
    <input type="hidden" name="t__smart" value="false"  />
    <input type="hidden" name="continueUrl" value="<?php echo urlencode('https://www.zazzle.com?www.capturedimagesmaine.com'); ?>"  />
    <input type="hidden" name="tc" value=""  />
    <input type="hidden" name="ic" value=""  />
    <input type="hidden" name="t_text1_txt" value=""  />
    <input type="hidden" name="t_coverimage_iid" value="<?php echo $main_image; ?>" 
/>
    <input class="btn btn-primary" type="submit" value="Create Your Own Custom Gifts" 
/>
  </form>

</div>
<?php endif; ?>