如何使用jquery检查数据库中的字段并显示检查或交叉？

Question

我有一个页面，我询问他们邮政编码。当他们在写完 5 个邮政编码后立即填写表格时，它会检查它是否包含在我的数据库中，并在其附近显示一个勾号或十字符号，并禁用提交。

总结一下。

1. 将等待访问者输入 5 位邮政编码（如果我们可以检查客户是否只输入数字，这将是一个加分和伟大）
2. 它将检查它是否包含在数据库中（我不要求 php 部分。可能我们会将其作为 POST 发送到 php 文件）
3. 如果它存在于数据库中，它将显示检查，否则它将显示交叉并且不允许提交表单。

我检查了一些网站，但找不到确切的解决方案。

谢谢

Answer 1

除了邮政编码文本框之外，您可能还需要一个图像标签，并将 src 属性设置为不可见图像。然后对 blur 事件执行 ajax。

HTML：

<input type="text" id="zip" name="zip"> <img id="imgconf" src="images/blank.png">

Javascript：

$('#zip').blur(function() {
   $.ajax({
     url: "script.php",
     type: "POST",
     data: "zip=" + $('#zip').val(),
     dataType: "text",
     success: function (data){
         if (data=="1"){
            $('#imgconf').attr("src", "images/correct.png");
         } else {
            $('#imgconf').attr("src", "images/wrong.png");
         }
       }
     });
});

对于数字验证，您可以使用相同的 PHP 脚本返回除“1”之外的另一个标志，并将其显示在另一个 span 元素中，表明输入的数据不是数字。也许只需在数据部分添加另一个键值对即可。

Answer 2

您将需要使用 AJAX。 JQuery 具有内置的 AJAX 功能。在每个 keyup 事件中，您可以让它运行此 AJAX 函数。 PHP 应返回 1 或 0 值以使其变得简单。 1显然是匹配，0是不匹配。

$('#YourObjectID').keyup(function (event) {
    searchZips();
})

function searchZips()
{

    var myJSON = $.ajax({
        url: options.script + '?Q=' + curValue,
        type: 'POST',
        contentType: 'application/json',
        success: function (msg) {
            if(msg==="1"){
                // CODE TO SHOW YOUR X DIV
            }
        }

}

您还需要添加清除搜索、检查是否为 null 或空字符串等功能，但这是应该让您继续前进的基础知识。我一直用这个。一旦你掌握了它的窍门，它就非常有用。然后考虑构建一个 jQuery 插件。一旦您可以完成上述功能，您就可以将其构建为插件（具有大量很酷的选项！）祝您好运，快乐编程。