jQuery 表单，存在检查

Posted 2023-02-22

【中文标题】jQuery 表单，存在检查

【英文标题】：jQuery form, exist checking

【发布时间】：2015-06-08 18:05:43

【问题描述】：

所以我正在创建一个简单的表单，使用 jQuery 检查用户输入的值是否存在于我的数据库中。到目前为止，到目前为止一切正常，但我发现自己陷入了下一部分。

为了便于解释，我将仅展示我想要实现的目标的示例。 对于这个例子，我将是“weden”

weeden 在我数据库的 company 表中的 ID 为 255。

如果用户在客户端字段中输入“weeden” 在客户端字段的右侧（在网络表单上），文本“weeden is available”将出现

我希望发生的是：“ID 255 不可用”

这里是相关代码。

HTML 表单

<form action="addrecord.php" method="post" autocomplete="off"/>  
<div class="form-field">
  <label for="client">Client: </label>
  <input type="text" name="client" id="client" class="check-exists" data-type="client" placeholder="#">
  <span class="check-exists-feedback" data-type="client"></span>
</div>

jQuery 函数

$.fn.existsChecker = function()
  return this.each(function()   
        var interval;

        $(this).on('keyup', function()
            var self = $(this),
                selfType = self.data('type'),
                selfValue,
                feedback = $('.check-exists-feedback[data-type=' + selfType + ']');

            if(interval === undefined)
                interval = setInterval(function()

                  if(selfValue !== self.val())
                      selfValue = self.val();

                      if(selfValue.length >= 1)
                          $.ajax(
                              url: 'check.php',
                              type: 'get',
                              dataType: 'json',
                              data: 
                                    type: selfType,
                                    value: selfValue
                              ,
                              success: function(data)
                                  if(data.exists !== undefined)
                                      if (data.exists === true)
                                          feedback.text(selfValue + ' is already taken.');
                                      else 
                                          feedback.text(selfValue + ' is available');
                                      
                                  
                              ,
                              error: function()

                              
                           );
                       
                  
              , 1000);
          
      );
  );
;

Check.php

$db= new PDO('mysql:host=host;dbname=mydb', 'user', 'pass');

if(isset($_GET['type'], $_GET['value']))

$type = strtolower(trim($_GET['type']));
$value= trim($_GET['value']);

$output = array('exists' => false);


if(in_array($type,
            array('client')
            )
   )

  switch($type)
      case 'client':
           $check = $db->prepare("
                SELECT COUNT(*) AS count
                FROM company
                WHERE name = :value
            ");
       break;

$check->execute(array('value'=> $value));
$output['exists'] = $check->fetchObject()->count ? true: false;
echo json_encode($output);

任何帮助/建议将不胜感激。我认为自己是初学者，这是我第一次从事网络项目。

为了提前澄清，同一个网络表单上还有许多其他输入字段，例如：电子邮件、日期、第一个、最后一个等。 我希望我的问题足够清楚。谢谢

【问题讨论】：

您返回的数字似乎是基于存在多少名为 weedn 的人。而是调整您的查询，使其实际查询以查看 weedn 是否存在，如果存在，则返回它们的 id

$check = $db->prepare("SELECT id FROM company WHERE name = :value"); 喜欢这样吗？

是的，然后确保你也调整了它在底部返回的内容

那么问题是，如果我更改 $ouput 返回的内容，它会弄乱我的表单的其余部分。表单上还有其他字段，我希望他们的行为保持原样。在我上面提供的代码中，我省略了 switch 中的其他情况。 html 代码段也是如此

【参考方案1】：

您必须将查询更改为以下内容：

$check = $db->prepare("
            SELECT id, COUNT(*) AS count
            FROM company
            WHERE name = :value
        ");

我假设您在 company 表上的主键字段名为 id。

最后将id存储在output-Array中

$result = $check->fetchObject();
$output['exists'] = $result->count ? true: false;
$output['id'] = $result->id;

然后你可以像这样输出id：

if (data.exists === true)
  feedback.text('ID ' + data.id + ' is unavailable');

【讨论】：

您还没有将id 存储到$output 数组中，那么您将如何在响应中获得data.id？所以，请更新答案，将id 存储到$output['id']..

当我使用这种方法时，我会在我的 HTML 表单上得到这个响应。 “ID null 已被占用”我将 ID 存储到 $output 数组中，如下所示 $output['id'] = $check->fetchObject()->id;

@JosephC 请在success: function(data) 之后添加console.log(data);。在 DevTools 中打开您的控制台（Chrome 和 Firefox 的说明），提交您的表单并向我们展示输出（来自控制台）。

这是我在控制台中看到的。对象 exists: true, id: null。我已经尝试硬编码 $output['id'] 并且似乎工作正常，所以我认为问题在于将查询结果存储到 $output['id']

@JosephC 我已经编辑了我的答案，请尝试新代码。只使用一次fetchObject，否则会获取下一行并返回null 。

【参考方案2】：

您可以处理查询中的所有内容

     $db= new PDO('mysql:host=host;dbname=mydb', 'user', 'pass');

     if(isset($_GET['type'], $_GET['value']))

         $type = strtolower(trim($_GET['type']));
         $value= trim($_GET['value']);

         $output = array('exists' => false);


        if(in_array($type,array('client')))

            switch($type)
                 case 'client':
                       $check = $db->prepare("
                    SELECT (CASE WHEN(COUNT(id)>0) THEN id ELSE FALSE END) AS count 
                    FROM company WHERE name = :value ");
                  break;
              
            $check->execute(array('value'=> $value));
            $output['exists'] = $check->fetchObject()->count ? true: false;
            echo json_encode($output);
       

在 Ajax 中成功

      if(data.exists !== undefined)
          if (!data.exists)
                feedback.text(selfValue + ' is already taken.');
          else 
               feedback.text(selfValue + ' is already taken.');