使用php从mysql中选择数据,在html下拉列表中显示,并通过javascript

时间:2018-05-31 09:08:43

标签: javascript php html mysql ajax

首先,请理解我刚刚开始学习过去10天内的php,javascript和ajax,所以我需要一些手持式和分步示例和指导。我在w3schools仔细阅读了这些主题的课程,发现它们非常有用;结果,我能够使用他们的示例和我在这里找到的其他网站和其他网站为我的项目编写一些基本代码。

这篇文章有点冗长,所以我可以解释一下这个代码的最终目标以及我已经尝试过的内容。

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

这是我的项目:

我正在使用Joomla 3.xx,Bootstrap 3和j2store(以及其他组件和模块)构建一个网站,其中包含可作为数字图像出售的照片,可应用于实体产品(帆布印刷品,T恤,咖啡)马克杯等)。这些实体产品存在于第三方网站(Zazzle)上,它们嵌入我的私人网站,使用Zazzle的RSS源和另一个第三方javascript代码(将Zazzle RSS feed网格显示嵌入到我的网站中)。

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

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

例如,用户首先使用main_image“Light Purple African Daisy”查看我网站上的页面,从下拉列表中选择一类电子产品,然后单击“设计您自己的礼物”按钮打开一个新窗口,连接到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路径。

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

  1. 连接数据库
  2. 选择列/表
  3. 从列/表中获取数据
  4. 创建HTML表单以显示MYSQL查询的结果
  5. 创建查询结果的下拉列表选择列表
  6. 使用Zazzle API与参数/动态值连接的回声编码URL
  7. 到目前为止,这是我的代码:

     <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来完成此操作,但我还不知道自己编写它。

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

    1. 将适当的$变量分配给要用于连接的URL片段($ ZAPI,$ cg等)
    2. 将适当的$变量分配给数据库下拉列表选择要在上面的URL中使用的结果
    3. 连接所有$ variables
    4. 解析所有$ variables
    5. 将最终编码的网址嵌入按钮
    6. 使用活动页面main_image的缩略图作为按钮图像src
    7. 我现在需要知道的是如何将'cim_template_cg'的数值插入最终URL中的“cg =”参数,以便当用户选择时,最终的URL将输出“&amp; cg = 196215449301144739”与cg =。

      相关联的'cim_template_cgname'

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

      提前感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

因此,如果我理解你的问题,你有必要的数据来实现这一点,即你有来自数据库的URL路径和ID,以及URL字符串,它需要在选择时动态添加这些数据库值?< / p>

回答你的一个问题,如果你希望在一个单独的文件中处理PHP逻辑,可以通过AJAX完成。

您可以做的是,使用您可以执行explode();的分隔符值将数据库中的URL路径和ID连接起来以获取值。

所以,你的<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来实现相同的结果,你需要将jQuery安装到你包含的库中,就像任何其他普通的JS / CSS文件一样。

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

答案 1 :(得分:0)

我联系了J2Store的开发人员,以寻求帮助,以从活动的J2Store产品页面获取main_image值,并将最终的API URL嵌入我的J2Store产品页面,因此他重写了我的代码以与Joomla和J2Store集成无错,如下:

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