jQuery.ajax 不会触发

Question

我是 jQuery 新手，请多多包涵 :-)

我想要做的是验证表单中的用户输入，对照 mysql 数据库检查输入。然后根据 T/F 设置颜色。

我已经设法在测试页面上让它工作，但在我的真实页面上它不起作用:(

这是工作代码。

<style>
body{width:50%;}
#frmCheckUsername {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.demoInputBox{padding:7px; border:#F0F0F0 1px solid; border-radius:4px;}
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>


$(document).ready(function(){
    $("#username").keyup(function(){
    //alert( "Handler for .keyup() called." );
    checkAvailability();
    });
});

function checkAvailability() {
    //$("#loaderIcon").show();
    jQuery.ajax({
    url: "check_av2.php",
    data:'username='+$("#username").val(),
    type: "POST",
    success:function(data){
        //alert( data );
            //if(data){$("#username").css("background-color", "yellow");}
        $("#username").css("background-color", data);
    },
    error:function (){}
    });
}
</script>


<label>Check Username:</label>
<input name="usernae" type="text" id="username" class="demoInputBox">  


----
check_av2.php

<?php
include ('inc/environment.php');
db_open();

$id = $_POST["username"];

if(!empty($id)) {
    $result = mysql_query("SELECT id FROM lakes WHERE id='".$id."'");
    $row = mysql_num_rows($result);
    db_close();
    if($row>0) {
    echo "#BAF490";

    }else{
    echo "#F22A26";
    }
}
?>

现在将其复制到现有代码时，它不会改变颜色。我不知道现在如何进行。 'div'会影响id吗？ 现有代码还包括其他脚本

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

这些其他脚本是否包含干扰？

这里的代码不起作用。

<SCRIPT>
$(document).ready(function(){
$("#sm").keyup(function(){
  //alert( "Handler for .keyup() called." );
  checkAvailability();
});
});

function checkAvailability() {
  //$("#sm").css("background-color", "yellow");
  jQuery.ajax({
  url: "check_av2.php",
  data:'username='+$("#sm").val(),
  type: "POST",
  success:function(data){
        //alert( data );
        $("#rstm").css("background-color", "yellow");
        $("#sm").css("background-color", data);
        //$("#loaderIcon").hide();
  },
  error:function (){}
  });
}
</SCRIPT>   
<input name="sm"
type="text" class="uppercase"
id="sm" value="<?=$sm?>" size="4"
title="Eget">

---

现在如果我取消注释 $("#sm").css("background-color", "yellow");该框将变为黄色在框中键入，但 jquery.ajax 似乎没有触发。

不太容易解释，但我希望你能明白 :-) 而且我不能在这里发布无效页面的整个代码。 如果需要，我可以通过邮件发送代码。

已解决 我不能让这过去了。 解决方案如果更烦人。通过删除块中的代码并缩小块来找到它。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

代码中存在。删除那条线就行了！！ 反正坦克:-)

Answer 1

请尝试

data:{'username':$("#username").val()}

干得好:)

Answer 2

请将对象作为数据传递

jQuery.ajax({
    url: "check_av2.php",
    data:{'username':$("#username").val()},
    type: "POST",
    success:function(data){
        $("#username").css("background-color", data);
    },
    error:function (){}
    });


jQuery.ajax({
    url: "check_av2.php",
    data:{'username':$("#sm").val()},
    type: "POST",
    success:function(data){
        $("#rstm").css("background-color", "yellow");
        $("#sm").css("background-color", data);
    },
    error:function (){}
});