Question

我有一个用户设置/创建表单，其中包括在用户设置过程中请求用户许可证/认证编号。但是，我需要输入的许可证信息进行验证并返回到目标DIV Onchange ，然后才能正常提交完整表单。据我所知，AJAX POST是这样做的方法，但我从未使用过AJAX。我在W3schools here看一个例子但它使用的是单个选择设置的值。在我的情况下，我有3个单独的表单字段，通常被清理并发送到独立的PHP文件，期望通过SUBMIT上的POST方法3个变量，就像正常一样。

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

FORM

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

Answer 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

Answer 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>';

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

2 个答案: