在表单提交之前对 DB onchange 进行 AJAX 查询答案

【问题标题】：AJAX query to DB onchange, before form submit在表单提交之前对 DB onchange 进行 AJAX 查询
【发布时间】：2014-01-28 16:21:52
【问题描述】：

我有一个用户设置/创建表单，其中包括在用户设置过程中请求用户许可证/认证号。但是，在实际正常提交完整表单之前，我需要验证输入的许可证信息并将其返回到目标 DIV Onchange。据我了解，AJAX POST 可以做到这一点，但我从未使用过 AJAX。我在看 W3schools 上的一个例子here 但它使用单个选择设置的值。在我的情况下，我有 3 个单独的表单字段，它们通常会被清理并发送到一个独立的 PHP 文件，该文件需要像正常一样通过 SUBMIT 上的 POST 方法发送 3 个变量。

当我需要传递/提交 3 个变量到接收 PHP 处理文件时，有人可以向我展示如何完成 AJAX 调用的示例，当我需要在 LAST 时使用 POST 方法FORM FIELD 已退出（onblur）？

表格

<div>Active license?<input name="sffl" type="checkbox" value="1">Yes | License# 
<input name="dig1" type="text" size="5" maxlength="1" placeholder="5">-
<input name="dig2" type="text" size="8" maxlength="2" placeholder="12">-
<input name="dig3" type="text" size="7" maxlength="3" value="XXX" disabled>-
<input name="dig4" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig5" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig6" type="text" size="10" maxlength="5" placeholder="22131">
</div>

响应目标

<div id="datatarget">&nbsp;</div>

【问题讨论】：

标签： javascript php ajax

【解决方案1】：

这是我从检查时间的 ajax 调用中剪切和粘贴的代码。它向服务器发送多个变量。

再次编辑指出此 ajax 调用使用 jquery，有些人对此表示抱怨，但我发现它对于 ajax 调用非常简单直接。

 $("#startdate,#starttime,#enddate,#endtime" ).change(function(){
    $("#date_error").show('');  //clears the error display
    $("#date_error").html('...validating');  //puts a temporary value
    var startdate=$("#startdate").val();  
    var starttime = $("#starttime").val();
    var enddate=$("#enddate").val();
    var endtime=$("#endtime").val();

    startdate = startdate + ' ' + starttime;  //combine date and time
    enddate = enddate + ' ' + endtime;    //combine date and time

    $.post("http://www.mysite.net/contest/validate/",
    {
        startdate:startdate,  //sends to server with post collection
        enddate:enddate,
        id:id
    }, 
    function(data,status) {
      $("#date_error").html(data);

    });  //.post
  }); // keyup

【讨论】：

好的，在尝试使用您提供的内容作为我不知道的东西的基础时，我拥有的代码如下工作直到将帖子值分配给 $a、$b 和$c - POST 可能正在工作，但我不知道如何将其返回到发出 ajax 调用的此页面的响应数据。可以说出这是错误的地方或我需要做些什么不同的事情吗？我需要响应成为#datatarget的innerHTML
$(document).ready(function(){ $("#dig6").blur(function(){ var $a = $("#dig1").val(); var $b = $("#dig2").val(); var $c = $("#dig6").val(); $.post("http://www.mywebsite.com/xyz.php", { var1:$a, //sends to server with post collection var2:$b, var3:$c }, function(data,status) { $("#datatarget").html(data); }); //.post }); });
line function(data,status) 是您获取 ajax 调用结果的地方。数据是返回的，状态是......状态。

【解决方案2】：

以下代码有效，我在玩了几个小时后理解它是 jquery/ajax 的组合？？？无论如何，这是成功的最终结果：

<div>Active license?<input name="sffl" type="checkbox" value="1">Yes | License# 
<input name="dig1" type="text" size="5" maxlength="1" placeholder="5">-
<input name="dig2" type="text" size="8" maxlength="2" placeholder="12">-
<input name="dig3" type="text" size="7" maxlength="3" value="XXX" disabled>-
<input name="dig4" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig5" type="text" size="7" maxlength="2" value="XX" disabled>-
<input name="dig6" type="text" size="10" maxlength="5" placeholder="22131">
</div>

米

$(document).ready(function()        {

$("#dig6").blur(function(){

$.ajax({
            type : 'POST',
            url : 'test.php',           
            data: {
                var1 : $('#dig1').val(),
                var2 : $('#dig2').val(),
                var3 : $('#dig6').val()
            },
            success:function (data) {
                $("#datatarget").append(data);
            }     });  });   });

test.php 包含：

echo $_POST["var1"].'<br>';
echo $_POST["var2"].'<br>';
echo $_POST["var3"].'<br>';

【讨论】：