没有返回 true 的 javascript 代码

Question

这是我的 JavaScript 代码

  function validatenewcat(){
        var category = document.getElementById("cat").value;
        if(category==""){
            setTimeout(document.getElementById("validate").innerHTML="!PLz Enter The Category Name", 2000);
            return false;
        }
    else{
        var url="catnamecheck.do?id="+category;
         xmlhttp.open("post", url,true);
         xmlhttp.onreadystatechange=(function (callback){
             return function (){
          if(xmlhttp.readyState==4){      
                 if(xmlhttp.status==200){   
                    var temp = xmlhttp.responseText;
                    obj = JSON.parse(temp);
                  if(obj.catgoryname==category){
                      alert("inside flase");
                     var validate = document.getElementById("validate");
                     validate.innerHTML="!PLz Enter The Unique Category Name";
                         callback(false); 
                     }
                 if(obj.catgoryname!=category){
                    alert("inside true");
                         callback(true);
                     }
                  }
              }
           }
         })(myCallback);
         xmlhttp.send(null);
        }
    }

任何人都可以帮助我这个函数在这里没有返回 true 我正在使用 ajax 从 javacode 检查唯一的类别名称 这是我的回调函数

  function myCallback(returnedValue) {
        if (returnedValue) {
            alert("entered callback function");
            // true returned. Validation successful. Do whatever you want
            // here in this case.
        }
        else {
            // false returned. Validation failed. Handle the "false" scenario here
            alert("entered callback function");
        }
    }

这是我的jsp代码

<form name="frm" action="createnewcatgoryBean.jsp"  method="post" onsubmit="return validatenewcat()">
<table style="padding: 5px 0px 0px 8px;">
<tr>
<th colspan="2">
<div style="width: width:271px; color:red;" id="validate"></div>
</th>
</tr>
<tr>
<th>Category Name<span>:</span></th><td><input id="cat"  onblur="return validatenewcat()" type="text" name="category">
</td>
</tr>
<tr>
<th>Quotations form<span>:</span></th><td><input type="checkbox" name="quotations"></td>
</tr>
<tr>
<th>Agreement form<span>:</span></th><td><input type="checkbox" name="agreement"></td>
</tr>
<tr>
<th>Payment form<span>:</span></th><td><input type="checkbox" name="payment"></td>
</tr>
<tr>
<th>ETI<span>:</span></th><td><input type="checkbox" name="eti"></td>
</tr>
<tr>
<td colspan="2" style="float:right; padding-top:15px">
<input type="submit" value="Submit"  style="width: 60px;">
</td>
</tr>
</table>
</form>

任何人都可以告诉我如何返回成功或失败的表单回调函数这是我编辑的代码

---

这是我的javascript代码

function validatenewcat(){
        var category = document.getElementById("cat").value;
        if(category==""){
            setTimeout(document.getElementById("validate").innerHTML="!PLz Enter The Category Name", 2000);
            return false;
                 }
    else{
        var url="catnamecheck.do?id="+category;
         xmlhttp.open("post", url,true);
         xmlhttp.send(null);
         xmlhttp.onreadystatechange= function (){
          if(xmlhttp.readyState==4){      
                 if(xmlhttp.status==200){   
                    var temp = xmlhttp.responseText;
                    obj = JSON.parse(temp);
                   var unique = (obj.catgoryname != category);
                  if(unique ){
                      document.getElementById("newcatform").submit();
                             }
                  else{
                     var validate = document.getElementById("validate");
                     validate.innerHTML="!PLz Enter The Unique Category Name";
                       }
                  }
              }
           };
           return false;    
        }

这是我的jsp代码

<form id="newcatform" name="frm" action="createnewcatgoryBean.jsp"  method="post">
<table style="padding: 5px 0px 0px 8px;">
<tr>
<th colspan="2">
<div style="width: width:271px; color:red;" id="validate"></div>
</th>
</tr>
<tr>
<th>Category Name<span>:</span></th><td><input id="cat"  onblur="return validatenewcat()" type="text" name="category">
</td>
</tr>
<tr>
<th>Quotations form<span>:</span></th><td><input type="checkbox" name="quotations"></td>
</tr>
<tr>
<th>Agreement form<span>:</span></th><td><input type="checkbox" name="agreement"></td>
</tr>
<tr>
<th>Payment form<span>:</span></th><td><input type="checkbox" name="payment"></td>
</tr>
<tr>
<th>ETI<span>:</span></th><td><input type="checkbox" name="eti"></td>
</tr>
<tr>
<td colspan="2" style="float:right; padding-top:15px">
<input type="button" value="Submit" onclick="validatenewcat()"  style="width: 60px;">
</td>
</tr>
</table>
</form>
</div>

        }

Answer 1

onreadystatechange 中的代码称为“event handler”，只有在您的 POST 操作完成后才会执行。这是您的 validatenewcat 函数在您运行时实际执行的操作:

var category = document.getElementById("cat").value;
var url = "catnamecheck.do?id=" + category;
xmlhttp.open("post", url, true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = (code to be called later)
return false; // <-- Always return false

您需要将需要 TRUE/FALSE 结果的代码移动到 onreadystatechange 函数中，以便在 HTTP 操作完成后执行:

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            var temp = xmlhttp.responseText;
            obj = JSON.parse(temp);
            var unique = (obj.catgoryname != category);

            if (unique) {
                // Submit the form to the server
                document.getElementById("newcatform").submit();
            } else {
                document.getElementById("validate").innerHTML = "!PLz Enter The Unique Category Name";
            }
        }
    }
}

在您的 JSP 中，您可以使用此函数在提交表单之前验证您的类别:

<form id="newcatform" name="frm" action="createnewcatgoryBean.jsp" method="post">
...
<input type="button" value="Submit" onclick="validatenewcat()">
</form>

显然，一些重命名也是明智的。例如“validatenewcat()”可以变成“validateandsend()”。

最后，为避免计时问题，您应该在发送请求之前设置回调函数，以便在响应返回时回调函数已经存在:

xmlhttp.open("post", url, true);
xmlhttp.onreadystatechange = function () {
    // ... callback code here ...
}
xmlhttp.send(null); // <- Move under onreadystatechange callback