0

我有以下脚本：

<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) 中。请帮助如何解决同样的问题。

4

3 回答 3

0

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

改变

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

至

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

当然，这是假设您在 POST 的成功函数中得到响应。

于 2012-10-23T18:26:39.787 回答
0

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

HTML / Javascript 函数 form_validation() { var error = 0; 变量错误消息；

    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;
?>
于 2012-10-24T05:01:07.333 回答
0

尝试

$.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-->XHR 选项卡，我们可以看到异步请求的结果。

于 2012-10-23T19:36:42.250 回答