Question

我有代码，在提交按钮上我必须检查所有验证并同时运行ajax。我有复杂的代码，但问题显示在演示代码中。

当我要检查验证并运行ajax时，即使我写了return false并且提交动作正在执行，值也会始终为真。

这种情况正在发生，因为ajax的性质是异步运行的。有人给了我解决方案作为链接How do I return the response from an asynchronous call?

但我需要代码解决方案所以请解决我的这类问题。我超过一个月就遇到了这个问题。我的代码示例如下。

checkjavascript.php

<?php
if(isset($_POST['submit'])){
    die("lokesh");
}
?>
<html>
    <head>        
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            function checkjs(){                
                if(document.getElementById('a').value==""){
                    alert("insert a");
                    return false;
                }
                if(document.getElementById('b').value==""){
                    alert("insert b");
                    return false;
                }
                if(document.getElementById('c').value==""){
                    alert("insert c");
                    return false;
                }
                var companyname = document.getElementById('b').value;
                var username = document.getElementById('c').value;
                jQuery.ajax({
            type: "POST",           
            dataType: "json",   
            url:'checkexisting.php',
            data:{
                companyname: companyname,username: username,
            },
            success:function(response) {
                            alert(response);
                            return false;
                            //$( "#lokeshform" ).submit();
                            //jQuery( "#lokeshform" ).submit();
                            document.forms.form.submit();                            
            }
            });                
            }
        </script>
    </head>
    <body>
        <form action="#" method="post" name="form" id="lokeshform" onsubmit="return checkjs();">
            <input type="text" id="a">
            <input type="text" id="b">
            <input type="text" id="c">
            <input type="submit" name="submit">
        </form>
    </body>
</html>

checkexisting.php

 <?php
$companyname = $_REQUEST['companyname'];
$username = $_REQUEST['username'];
$response = $companyname.$username;
echo json_encode($response);
?>

Answer 1

 success:function(response) {
     if (condition_to_form_submit) {
         document.forms.form.submit(); 
     }                           
  }

condition_to_form_submit取决于您的特定需求（可能需要检查一些响应值）

编辑：没有看到@Parag Bhayani已经推荐过这种解决方案。归功于他

Answer 2

function checkValid(){
    return new Promise(resolve,reject){
        jQuery.ajax({
            type: "POST",           
            dataType: "json",   
            url:'checkexisting.php',
            data:{
                companyname: companyname,username: username,
            },
            success:function(response) {
                 resolve(); //or reject(err) depend on response data                   
            }
        });                 
    }
}
function submitForm(){
    document.forms["form"].submit();
}
$('#submitBtn').on('click',function(e){
    checkValid().then(submitForm).catch(function(err){
        alert(err);
    })
}

移动表单外的提交按钮

如何实现javascript验证和ajax

2 个答案: