2012-10-23 53 views
0

我有以下脚本:没有得到响应的JQuery

<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 (#错误)。请帮助解决这个问题。

+0

你收到来自PHP脚本的响应? IE,你的评论警报调用是否有结果? – Jlange

+0

@Jlange一无所有。 –

+0

尝试向您的POST请求添加一个错误函数,并记录结果。像你的成功处理程序,除了'error:function(jqXHR,textStatus,errorThrown){console.log(jqXHR,textStatus,errorThrown);}'也许这将揭示POST失败的原因。 – Jlange

回答

0

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

变化

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

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

这当然是假设你有你的POST成功函数的响应。

+0

仍然没有发生。 –

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); 
     }      
}); 

对于此类情形,像萤火虫的工具是有用的。通过导航到Net - > XHR选项卡,我们可以看到异步请求的结果。

0

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

HTML /使用Javascript 功能form_validation() { VAR误差= 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; 
?>