jquery - 我想在onkeyup事件中从数据库检索信息，并使用jquery在文本框中显示它

在stackoverflow上，我发现了很多程序，但是没有一个程序显示如何将从数据库中检索到的结果放置到文本框中……

我的代码如下：

<html>
<head>
<script>
$(function(){
  $(".search").keyup(function() {
  var searchid = $(this).val();
  var dataString = 'search='+ searchid;
  if(searchid!='') {
    $.ajax({
      type: "POST",
      url: "upload.php",
      data: dataString,
      cache: false,
      success: function(html) {
        $("#result").html(html).show();
      }
    });
  }
  return false;
});
</script>
</head>
<body>
<p>Center:
<input type="text" name="center" class="search"></p>
<p>username:
<input type="text" name="username" id="searchid"></p>
<p>Password:
<input type="text" name="password"></p>
</body>
</html>

数据库表：

create table user(
center int(10),
username varchar(10),
password varchar(10),
primary key(center)
)

现在，我希望在第一个文本框中输入信息时，应该从MySql数据库的接下来的两个文本框中获取用户名和密码。该怎么办？

最佳答案

你差不多了。一些提示：

（1）您需要在<script>标记内包含javascript / jQuery代码：

<script type="text/javascript">
    $(function(){
      $(".search").keyup(function() {
      var searchid = $(this).val();
      var dataString = 'search='+ searchid;
      if(searchid!='') {
        $.ajax({
          type: "POST",
          url: "upload.php",
          data: dataString,
          cache: false,
          success: function(html) {
            $("#result").html(html).show();
          }
        });
      }
      return false;
    });
</script>

（2）您需要在Web根目录中有upload.php文件，并且它应如下所示：

<?php

$srx = $_POST['search'];

//Do your MySQL search here, something like:
$result = mysql_query("SELECT * FROM `users` WHERE `username` LIKE '$search' LIMIT 1");

$data = mysql_fetch_assoc($result);

$un = $data['username'];
$pw = $data['password'];

echo $un .'|'. $pw;

由于您期望使用HTML，因此我使用|字符加入了username | password。您也可以将其作为JSON发送，但这有点复杂。

现在，在您的AJAX成功函数中：

<script type="text/javascript">
    $(function(){
      $(".search").keyup(function() {
      var searchid = $(this).val();
      var dataString = 'search='+ searchid;
      if(searchid!='') {
        $.ajax({
          type: "POST",
          url: "upload.php",
          data: dataString,
          cache: false,
          success: function(html) {
            var data = html.split['|'];
            var un = data[0];
            var pw = data[1];
            $("#searchid").val(un);
            $("#password").val(pw);
          }
        });
      }
      return false;
    });
</script>

运作方式如下：

（a）PHP文件回显了搜索到的数据：“ Bob Jones | mypass”

（b）AJAX成功函数将其接收为html = "Bob Jones|mypass";

（c）因此，您可以在split()字符上|该数据创建一个名为data的数组

（d）然后从数据数组中创建两个新的变量，un和pw

（e）将每个变量放在其所属的位置。

（f）请注意，必须使用.val(varname)（而不是.html）将值插入<input type="text"元素

（g）您的<input type="password"字段没有ID。请添加ID password，以使我的代码正常工作：

<input type="text" name="password" id="password" >

（h）您似乎对<input class="search"字段和<input id="searchid"字段感到困惑，因为您的用户在第一个字段（class =“ search”）中键入内容，但您将其值称为“ searchid”，即其他输入字段的ID。