我想从数据库中检索有关 onkeyup 事件的信息并使用 jquery 在文本框中显示它答案

【问题标题】：I want to retrieve information from database on onkeyup event and show it in text boxes using jquery我想从数据库中检索有关 onkeyup 事件的信息并使用 jquery 在文本框中显示它
【发布时间】：2014-09-17 03:01:54
【问题描述】：

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

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

【问题讨论】：

从服务器请求数据，使用jQuery选择输入，使用val方法设置值。
你能把代码写详细给我吗.....？
如何向服务器请求数据？
您的服务器上运行什么？你有定义接口吗？
@PrakashPatil 使用问题下方的编辑按钮发表评论并添加代码 sn-p。它将帮助您获得答案

标签： jquery mysql sql

【解决方案1】：

你几乎得到它。几点建议：

(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，我使用 | 字符加入了用户名|密码。您也可以将其作为 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";

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

【讨论】：

mysql_* 函数已弃用，不应再使用。请告知mysqli_*函数的用法或更好地使用PDO。