【问题标题】:fetch records without using a button不使用按钮获取记录
【发布时间】:2014-04-03 19:35:50
【问题描述】:

我编写了这个简单的代码来根据手机号码(用户提供的手机号码)获取客户姓名和地址。我已使用 Fetch 按钮 成功完成此操作。但我需要没有按钮选项。

当用户在文本字段中输入手机号码时,他们将转到下一个字段(姓名)。如果数据库中已存在手机号码,则应从数据库中获取客户名称和地址。如果手机号码不存在,他们将输入剩余的两个字段。有什么帮助吗?

require('config.php');
if(isset($_POST['submit']))
{
    $cmobile = $_POST['mobile'];
    $cname = $_POST['name'];
    $caddress = $_POST['address'];

    try
    {
        $stmt = $conn->prepare("INSERT INTO autocomplete ( mobile, name, address ) VALUES ( :cmobile, :cname, :caddress )");
        $conn->errorInfo();
        $stmt->bindParam(':cmobile', $cmobile, PDO::PARAM_STR);
        $stmt->bindParam(':cname', $cname, PDO::PARAM_STR);
        $stmt->bindParam(':caddress', $caddress, PDO::PARAM_STR);
        $stmt->execute();
    }
    catch(PDOException $e)
    {
        $e->getMessage();
    }
    if($stmt)
    {
        echo "success";
    }
    else
    {
        echo "error";
    }
}
if(isset($_POST['fetch']))
{
    $cmobile = $_POST['mobile'];

    try
    {
        $stmt = $conn->prepare("SELECT * FROM autocomplete WHERE mobile = :cmobile");
        $conn->errorInfo();
        $stmt->bindParam(':cmobile', $cmobile, PDO::PARAM_STR);
        $stmt->execute();
        while($row = $stmt->fetch(PDO::FETCH_ASSOC))
        {
            $aname = $row['name'];
            $aaddress = $row['address'];
        }
    }
    catch(PDOException $e)
    {
        $e->getMessage();
    }
    if($stmt)
    {
        echo "fetch success";
    }
    else
    {
        echo "fetch error";
    }
}

<form method="post" name="form" action="">
    mobile number : <input type="text" name="mobile" /><br />
    name : <input type="text" name="name" value="<?= $aname ?>" /><br />
    address : <input type="text" name="address" value="<?= $aaddress ?>" />
    <br />
    <input type="submit" name="submit" value="Submit" />
    <button name="fetch">Fetch</button>
</form>

【问题讨论】:

    标签: jquery mysql ajax


    【解决方案1】:

    尝试使用 jQuery 来实现。

    https://api.jquery.com/jQuery.ajax/

    http://api.jquery.com/mouseleave/

    只需为此制作简单的函数。

    【讨论】:

    • 你说对了一部分。但不是mouseleave(),而是blur
    • 不鼓励仅链接的答案,因为它们可能会中断。请从您的链接中提取相关信息到此答案中,以便信息可用,即使链接不可用。
    【解决方案2】:

    最好的方法是选择 Ajax。无需刷新页面即可填充数据。

    $('input[name="mobile"]').blur(function(e)
    {
      mobile=$(this).val();
      $.ajax(
      {
        type: "POST",
        url: "PAGE_URL_TO_GET_NEW_DATA",
        data: {mobile: mobile},
        dataType: "JSON",
        success: function(data)
        {
          $('input[name="name"]').val(data.name);
          $('input[name="address"]').val(data.address);
        }
      }
    });
    

    在您的 PHP 页面中,使用 json_encode 而不是简单的 echo

    【讨论】:

      【解决方案3】:

      您可以在 html 的文本字段中添加一些不同的事件:

      如果你有 HTML5:

      • oninput(仅在实际发生更改时触发,但会立即触发)

      否则:

      • onchange

      • onkeyup(不是 keydown 或 keypress,因为输入的值不会有 新的按键)

      • onpaste(支持时)

      因此,您可以使用 javascript 操作来触发文本字段的键,这需要检查手机号码字段的长度以及何时达到正确数量的数字来进行 php 提取。

      使用内联脚本的示例:**

          <script>
          function showInfo(str)
          {
          if (str=="")
            {
            document.getElementById("txtResult").innerHTML="";
            return;
            } 
          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 (xmlhttp.readyState==4 && xmlhttp.status==200)
              {
              document.getElementById("txtResult").innerHTML=xmlhttp.responseText;
              }
            }
          xmlhttp.open("GET","MYPHPFILE.php?q="+str,true);
          xmlhttp.send();
          }
          </script>
      

      <form method="post" name="form" action="showInfo(this.value);">
          mobile number : <input type="text" name="mobile" onKeyUp="showInfo(this.value);">
        <br />
          <input type="submit" name="submit" value="Submit" />
          <button name="fetch">Fetch</button>
      </form>
      
          <br>
          <div id="txtResult"><b>RESULTS FROM PHP WILL BE DISPLAYED HERE</b></div>
      

      ** 我建议使用一个库,例如 Dojo 来获得更简洁的 Ajax 方法,或者至少在外部 JavaScript 文件中制作脚本,并可能使用带有参数的方法来调用 ajax,这样你也可以在整个站点中重复使用它来调用其他东西。

      所以这是一个粗略的 JavaScript 示例(不包括 if 语句),它在移动字段的 key up 上被调用,如果您查看该字段,您可以看到 onkeyup 调用该方法并传递手机号码的值.

      添加一个 if 语句来检查到目前为止已经输入了多少数字(通过获取该元素的当前 innerhtml 的值并检查长度,然后在长度正确时执行 ajax),然后再执行该 Ajax 所以它只完全输入字段后进行检查。

      现在我假设你的 config.php 是你的带有数据库连接的文件,所以我会忽略连接的东西。

      <?php
      $q = intval($_GET['q']);
      
      $sql="SELECT * FROM registeredUsers WHERE mobile = $q";
      
      $result = mysqli_query($con,$sql);
      
      echo "<table border='1'>
      <tr>
      <th>Name</th>
      <th>Address</th>
      </tr>";
      
      while($row = mysqli_fetch_array($result))
        {
        echo "<tr>";
        echo "<td>" . $row['Name'] . "</td>";
        echo "<td>" . $row['Address'] . "</td>";
        echo "</tr>";
        }
      echo "</table>";
      
      mysqli_close($con);
      ?>
      

      所以这个 php 方法在 JavaScript 中调用,并将手机号码作为“q”传递,并将查找用户姓名和地址以及传递的手机号码。

      此方法要求您有某种带有手机名称和地址字段的已注册用户表,以便从中获取信息。

      如果是这样,它会将表格及其名称和地址返回到您的页面。一切都没有令人耳目一新......魔法! - 在当今世界有很多更有效的方法可以做到这一点,但是像这样的方法会起作用,我希望这可以帮助你了解它并让它发挥作用。

      【讨论】:

      • 是的,詹姆斯。你能告诉我一些解释的ajax解决方案吗?
      • 已编辑答案,包含更详细的信息和相关示例。
      • 这是无效的 WHERE mobile = :q"; 占位符,因为这些占位符用于 PDO 而不是 mysqli_*。你的想法更像WHERE mobile = ?"; 然后使用bind_param() 但在这种情况下,它需要是WHERE mobile = $q";
      【解决方案4】:

      也许这样的事情会奏效。但是异步执行此操作会有点困难。 您可能不得不使用一些 ajax。

      $(document).ready(function(){
       $("#fetch").hide();
      $("input").blur(function(){
         $("#fetch").click();
      });
      });
      

      【讨论】:

      • 通过隐藏提交按钮,如果js被禁用也将是一个故障保险。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-03-23
      • 2018-03-25
      • 1970-01-01
      • 2019-04-12
      • 2014-04-15
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多