时间戳

首页 > 解决方案 > 当 AJAX 用于基于下拉菜单选择显示数据时，按钮不起作用

php - 当 AJAX 用于基于下拉菜单选择显示数据时，按钮不起作用

问题描述

我有一个我们的页面（index.html），用户可以从下拉菜单中选择选项。基于选择的数据将从数据库中获取并使用 AJAX 显示在同一页面上（第二个文件称为 getParameter.php）。一切正常。现在我尝试添加一个按钮，以便打开一个新页面，用户可以编辑并将新值发送到数据库。但是按下按钮什么也没做。我尝试使用其他 html 文件。它适用于其他任何地方。请提供任何帮助

索引.html

//AJAX
 <script>

        function showParameterData(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getParameterData.php?q="+str,true);
                xmlhttp.send();
            }
        }
</script>



//drop down option selection

<body>

//showParameterData() is the function
<form>
            <select name="Device" onchange="showParameterData(this.value)">
              <option value="">Select</option>
              <option value="1">Device A </option>
              <option value="2">Device B </option>
              <option value="3">Device C </option>
              <option value="4">Device D </option>
              <option value="5">Device E </option>
              <option value="6">Device F </option>
            </select>
            </form>





//bitton to edit and  send data

<div class="edit_button_class" style= "float:right;">
  <form action="edit.html" method="get" target="_blank">
    <input type="submit" name="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>


<div id="txtHint"></div>

</body>

//getParameter.php


<?php
$q = intval($_GET['q']);
include ("DBconnect.php");

$conn= mysqli_connect( $dbhost, $dbuser, $dbpass, $db ) or die("Could not connect: " .mysqli_error($conn) );
$sql="SELECT * FROM parameter WHERE ID = '".$q."'";
$result = mysqli_query($conn,$sql);

while($row = mysqli_fetch_array($result)) {
$price = $row['price'];
$version = $row['version'];}

echo '<table>';
echo "<tr>
        <th>Price of the Device :</th>
        <td > $price </td>
</tr>";

echo "<tr>
        <th>version of the Device :</th>
        <td > $version </td>
</tr>";
echo '</table>';
echo '</div>';

当我按下按钮时，URL 变成了奇怪的东西。它不会编辑.html。即使我刷新页面，奇怪的 URL 仍然存在。即使它显示 index.html 页面在 URL 中有一些额外的东西

标签： phphtmlmysql

解决方案

您在 URL 中看到的内容是获取参数。您通过使用 method='get' 您告诉表单以这种方式提交。

这将做的是将所有输入名称及其值发送到 URL 中，并将它们“附加”到您选择的操作页面。

例如，您单击按钮会将您发送到edit.html，其中包含提交的获取参数，其值为“单击以编辑”。任何具有 name 属性的内容都将作为 get 参数发送。您不需要提交输入的名称。

如果您使用提交按钮将您的选择放入表单中，它将发送选择的参数，这意味着您可以在您的编辑页面中使用它。

<div class="edit_button_class">
  <form action="edit.html" method="get" target="_blank">
    <select name="Device" onchange="showParameterData(this.value)">
      <option value="">Select</option>
      <option value="1">Device A </option>
      <option value="2">Device B </option>
      <option value="3">Device C </option>
      <option value="4">Device D </option>
      <option value="5">Device E </option>
      <option value="6">Device F </option>
    </select>
    <input type="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>

我从输入中删除了名称，因为这会导致它作为 GET 参数发送。使用上述内容，您将被发送到 /edit.html?submit=Click+to+Edit，然后您可以在您的编辑页面中使用它来获取您需要的内容。

希望这可以帮助。

推荐阅读