jquery - JQueryの応答がない

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）への応答が得られないことです。同じことを解決する方法について助けてください。

score 0 · Accepted Answer

結果を設定するために間違った jQuery 関数を使用しているようです。前のコードから、#errorセレクターが div 要素を指しているように見えます。この場合、関数を使用し.html()て応答を設定する必要があります。

変化する

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

に

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

もちろん、これは、POST の成功関数で応答があることを前提としています。

score 0 · Accepted Answer

試す

$.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 タブに移動すると、非同期リクエストの結果が表示されます。

score 0 · Accepted Answer

検証機能を分離した方が簡単だと思います。次に、php 検証スクリプトでは、json 応答を使用する方が安全です。

HTML / Javascript 関数 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 - JQueryの応答がない

3 に答える 3

Related

Reference