Question

我有以下脚本：

<script>
    $(document).ready(function(){
        $("div.msg").hide();
        $("button.show").click(function(){
            $("div.msg").slideDown(2000);
        });
        $("button.hide").click(function(){
            $("div.msg").slideUp(2000);
        });
        $("form.reg").submit(function(){
            var name = $("#name").val();
            if(($("#name").val() == "") || ($("#name").val() == null)){
                $("div.error").html("Name cannot be left blank");
                //alert("Name cannot be left blank");
                return false;
            }
            else{
                $("div.error").html("Name:"+name);
                return true;
            }       
        });
        $("#name").blur(function(){
            var name = $("#name").val();
            alert("Hi! "+name);
            $.ajax({
                type:"POST",
                url:"validate.php",
                data:"name="+name,
                success:function(res){
                    //alert(res);
                    $("#error").val(res);
                }
            });
        }); 
    });
</script>

和validate.php脚本：

<?php
if(isset($_POST['name'])){
    $name = $_POST['name'];
    if($name == 'sam')
        echo '<strong>Already taken.</strong>';
    else
        echo '<strong>Avaiable</strong>';
}
else
    echo 'Not Set!';
?>

我的问题是我从未将此验证页面的响应收到我的div（#error）。请帮忙解决如何解决问题。

Answer 1

您似乎只是使用错误的jQuery函数来设置结果。从您之前的代码中可以看出#error选择器指向div元素，在这种情况下，您需要使用函数.html()来设置响应。

更改

 $("#error").val(res);

到

$("#error").html(res);

当然，这是假设您在POST的成功功能中得到了回复。

Answer 2

尝试

$.ajax({                                
    url: "validate.php",
        data: { name: $("#name").val() },
        type: "POST",
        success: function (res) {
        alert(res); 
        //$("#error").val(res);
        },
        error: function(xhr, status, error) {
        alert(xhr.responseText);
        }                      
});

对于这些场景，像firebug这样的工具会很有用。通过导航到Net - ＆gt; XHR选项卡，我们可以看到异步请求的结果。

Answer 3

我认为如果你将验证功能分开会更容易。然后在你的php验证脚本上使用json响应会更安全。

HTML / Javascript function form_validation（） { var error = 0; var error_msg;

    if(($("#name").val() == "") || ($("#name").val() == null)){

        error_msg = "Name cannot be left blank";
        error = 1;
    }else
    {
         $.ajax({
                type:"POST",
                url:"validate.php",
                data:"name="+$("#name").val(),
                success:function(res){                    
                    if(res.status=='error')
                    {
                        error_msg = res.msg;
                        error = 1;
                    }
                },
                dataType: "json"
            });
    }

    if(error==1)
    {
        $("div.error").html(error_msg);
        return false;
    }else
    {
        return true;
    }
}

$(document).ready(function(){

    ("#name").blur(function(){
                form_validation();
        }); 

    $("form.reg").submit(function(){

        if(form_validation())
        {
            #### Do ajax post to PHP to save to your DB
        }

        return false; ### Do disable the form submit (page refresh)
    });

  });
</script>

PHP验证脚本

<?php

if(isset($_POST['name'])){
    $name = $_POST['name'];
    if($name == 'sam')
        $arr = array("status"=>'success','msg'=>'Taken');
    else
        $arr = array("status"=>'success','msg'=>'Available');
}
else
{
    $arr = array("status"=>'error','msg'=>'Error');
}

    echo json_encode($arr);
    exit;
?>

没有获得JQuery响应

3 个答案: