从 ajax 成功调用传递值答案

【问题标题】：pass values from ajax success call从 ajax 成功调用传递值
【发布时间】：2020-06-06 13:30:15
【问题描述】：

如何将 ajax 成功函数的值传递给我的 javascript fxn。在这里我想确定是否使用“pass”变量的值提交表单但是即使 x = 60，通过也始终等于 0。为什么？

<form id="stdform" method="post" action="registrtn.php" onsubmit=" return submitForm()">
<input type="text" id ="age" value="30">
<input type ="hidden" id="std" value="STD102"><!--the age for student ID is retrieved frm db using ajax-->
...
<button>submit form </button>
</form>

<script>
function submitForm(){
var ageLimit = document.getElementById("age").value;
var stdid = document.getElementById("std").value ;
var pass = 0;

$.ajax({
    type:'POST',
    url: 'pre-reg.php',
    data:{
       'id':stdid
       },
    success:function(result){
       var x = parseInt(result);
      if (x >= ageLimit) {
           pass = 1;
        }   
      checkvalue(pass);
    }
  });
}
function checkvalue(pass_val){
   if (pass_val==1){
     document.getElementById("stdform").submit();
    }else{
       alert(pass_val);//this shows up=>0, on false condition 
       document.getElementById("errormsg").style.display="block";//this escapes because form already submits
    }
}
</script>

【问题讨论】：

你的按钮没有调用 javascript 函数

标签： java ajax

【解决方案1】：

您可以创建一个function，它会在您的ajax success 执行时被调用，并将结果传递给该函数以进行进一步处理。因此，您的ajax 将如下所示：

function submitForm() {
  var ageLimit = document.getElementById("age").value;
  var stdid = document.getElementById("std").value;
  var pass = 0;

  $.ajax({
    type: 'POST',
    url: 'pre-reg.php',
    data: {
      'id': stdid
    },
    success: function(result) {
      var x = parseInt(result);
      if (x >= ageLimit) {
        pass = 1;
      }
      check_values(pass); //call function   
    }
  });
}
//pass value
function check_values(pass_val) {
  if (pass_val == 1) {
    //submit form
    document.getElementById('stdform').submit();
  } else {
    alert("something not right")
  }

}

您的表格：

<form id="stdform" method="post" action="registrtn.php">
<input type="text" id ="age" value="30">
<input type ="hidden" id="std" value="STD102"><!--the age for student ID is retrieved frm db using ajax-->
...
<button onclick="submitForm()">submit form </button>
//^^onclick added
</form>

【讨论】：

您的解决方案得到了逻辑，但问题是表单提交即使通过！=1，这可能是什么原因？
您是否从表单中删除了onsubmit 并将onclick 添加到按钮？另外，您的按钮是否有type="submit"？如果是，请将其更改为type="button"。
是的，我做了，但表单仍然提交，条件为 false。
当条件为假时，alert 是否会根据我的代码显示？因为如果if (x >= ageLimit) 是正确的，这段代码应该可以工作。
是的斯瓦蒂。警报出现并仍然提交表单。这是最令人困惑的部分

【解决方案2】：

pass 为 0 的原因是因为 ajax 调用是异步的，这意味着检查 pass 变量的代码在返回请求结果之前进行评估。因此，您需要在成功回调本身中包含检查去工作。

但是，通过检查实际上是不必要的，因为只有一个通过标准（x > 年龄限制），通过将始终等于（x > 年龄限制），因此您可以执行以下操作：

$.ajax({
    type:'POST',
    url: 'pre-reg.php',
    data:{
       'id':stdid
    },
    success:function(result){
        var x = parseInt(result);

       if (x >= ageLimit) {
           //logic for completing form submission
       }   
    }
});

【讨论】：

感谢您的解释。我尝试了 Swati 解决方案似乎让我接近了我的目标，但问题是即使条件为假也提交表单。你能帮忙吗？

【解决方案3】：

<form id="stdform" method="post" action="registrtn.php">
<input type="text" id ="age" value="30">
<input type ="hidden" id="std" value="STD102"><!--the age for student ID is retrieved frm db using ajax-->
...
<button id="submitBtn" type="submit">submit form </button>
</form>

<script>
document.getElementById("submitBtn").addEventListener('click',submitForm);
function submitForm(event){
    event.preventDefault();//this line prevents default submission of form
    var ageLimit = document.getElementById("age").value;
    var stdid = document.getElementById("std").value ;
    var pass = 0;

    $.ajax({
       type:'POST',
       url: 'pre-reg.php',
       data:{
       'id':stdid
    },
    success:function(result){
       var x = parseInt(result);
       if (x >= ageLimit) {
          pass = 1;
        } 
       checkvalue(pass);  
     }
  });
}
function checkvalue(pass_val){
    if(pass_val == 1){
      document.getElementById("stdform").submit();
    }else{
     alert("something is wrong");
    }
}
</script>

【讨论】：