JQuery-AJAX 요청을 동기화하는 방법

JQuery-AJAX 요청을 동기화하는 방법

Ajax 요청을 동기화하려면 어떻게 해야 합니까?

저는 제출해야 할 양식이 있습니다.하지만 사용자가 올바른 비밀번호를 입력해야만 제출할 수 있습니다.

다음은 양식 코드입니다.

<form name="form" action="insert.php" method="post" onSubmit="return ajaxSubmit(this);" >

그리고 비밀번호를 보내고 확인하기 위한 jquery 코드는 다음과 같습니다.

var ajaxSubmit = function(formE1) {

    var password = $.trim($('#employee_password').val());

    $.ajax({
        type: "POST",
        async: "false",
        url: "checkpass.php",
        data: "password="+password,
        success: function(html) {
            var arr=$.parseJSON(html);
            if(arr == "Successful") {
                return true;
            } else {
                return false;
            }
        }
    });
}

그러나 Ajax 요청에 의해 반환된 값에 관계없이 양식은 항상 제출됩니다.저는 다른 모든 것을 확인했습니다.올바른 암호를 입력하면 ar의 값이 '성공'으로 나타나고 그 반대로도 올바르게 작동합니다.

이 요청을 동기화하려면 어떻게 해야 합니까?디버그할 수 있는 한, 요청은 비동기식이므로 요청이 완료되기 전에 양식이 제출됩니다.

checkpass.php 코드

<?php 
require("includes/apptop.php");
require("classes/class_employee.php");
require("classes/class_employee_attendance.php");

$employee_password=$_POST['password']; 

$m=new employee();
$m->setbyid_employee(1);
$arr=$m->editdisplay_employee();

if($arr['employee_password'] == $employee_password)
{
$res="Successful";  
}
else
{
$res="Password not match";  
}

echo $res;
?>

업데이트: 솔루션을 찾았습니다.

올라프 디체가 지적한 바와 같이:의 반환 값ajaxSubmit의 반환 값이 아닙니다.success: function(){...}.ajaxSubmit값을 전혀 반환하지 않습니다. 이 값은 다음과 같습니다.undefined그것은 결국 평가됩니다.true.

이는 양식이 항상 제출되고 요청을 동기적으로 보내는지 여부와 무관한 이유입니다.

그래서 변수를 설정합니다.1성공 시 내부 성공 함수.그리고 그것의 가치를 성공 함수에서 확인했습니다, 만약 그렇다면.1성공 함수 밖에서, 나는 다음에 썼습니다.return true ... else return false그리고 그것은 효과가 있었습니다.

업데이트된 작업 코드:

var ajaxsubmit=function(forme1) {
    var password = $.trim($('#employee_password').val());
    var test="0";

    $.ajax({
        type: "POST",
        url: "checkpass.php",
        async: false,
        data: "password="+password,
        success: function(html) {
            if(html == "Successful") {
                test="1";
            } else {
                alert("Password incorrect. Please enter correct password.");
                test="0";
            }
        }
    });

    if(test=="1") {
        return true;
    } else if(test=="0") {
        return false;
    }
}

jQuery.jax()에서

비동기 부울
기본값: true
기본적으로 모든 요청은 비동기식으로 전송됩니다(즉, 기본적으로 true로 설정됨).동기화 요청이 필요한 경우 이 옵션을 false로 설정합니다.

그래서 당신의 요청에 따라, 당신은 해야 합니다.async: false대신에async: "false".

업데이트:

의 반환 값ajaxSubmit의 반환 값이 아닙니다.success: function(){...}.ajaxSubmit값을 전혀 반환하지 않습니다. 이 값은 다음과 같습니다.undefined그것은 결국 사실로 평가됩니다.

이는 양식이 항상 제출되고 요청을 동기적으로 보내는지 여부와 무관한 이유입니다.

양식만 제출하려는 경우, 응답이 다음과 같을 때"Successful"돌아와야 합니다false부터ajaxSubmit그런 다음 양식을 제출합니다.success함수, @halilb가 이미 제안한 것처럼.

이 노선들을 따라 무언가가 작동할 것입니다.

function ajaxSubmit() {
    var password = $.trim($('#employee_password').val());
    $.ajax({
        type: "POST",
        url: "checkpass.php",
        data: "password="+password,
        success: function(response) {
            if(response == "Successful")
            {
                $('form').removeAttr('onsubmit'); // prevent endless loop
                $('form').submit();
            }
        }
    });

    return false;
}

이것은 아래 것처럼 간단하고, 매력적으로 작동합니다.

나의 솔루션은 당신의 질문에 완벽하게 답합니다.JQuery-AJAX 요청을 동기화하는 방법

Ajax 호출 전에 Ajax를 동기식으로 설정한 다음 Ajax 호출 후에 재설정합니다.

$.ajaxSetup({async: false});

$ajax({ajax call....});

$.ajaxSetup({async: true});

이 경우 다음과 같습니다.

$.ajaxSetup({async: false});

$.ajax({
        type: "POST",
        async: "false",
        url: "checkpass.php",
        data: "password="+password,
        success: function(html) {
            var arr=$.parseJSON(html);
            if(arr == "Successful") {
                return true;
            } else {
                return false;
            }
        }
    });


$.ajaxSetup({async: true});

도움이 되었으면 좋겠습니다 :)

제출 시 이벤트를 추가하는 대신 제출 단추의 기본 작업을 방지할 수 있습니다.

다음 html에서:

<form name="form" action="insert.php" method="post">
    <input type='submit' />
</form>​

첫째, 제출 단추 동작을 방지합니다.그런 다음 비동기식으로 Ajax를 호출하고 암호가 맞으면 양식을 제출합니다.

$('input[type=submit]').click(function(e) {
    e.preventDefault(); //prevent form submit when button is clicked

    var password = $.trim($('#employee_password').val());

     $.ajax({
        type: "POST",
        url: "checkpass.php",
        data: "password="+password,
        success: function(html) {
            var arr=$.parseJSON(html);
            var $form = $('form');
            if(arr == "Successful")
            {    
                $form.submit(); //submit the form if the password is correct
            }
        }
    });
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

아래는 작업 예제입니다. 추가async:false.

const response = $.ajax({
                    type:"POST",
                    dataType:"json",
                    async:false, 
                    url:"your-url",
                    data:{"data":"data"}                        
                });                   
 console.log("response: ", response);

dataType을 json으로 추가하고 응답을 json으로 만들었습니다.

PHP

echo json_encode(array('success'=>$res)); //send the response as json **use this instead of echo $res in your php file**

자바스크립트

  var ajaxSubmit = function(formE1) {

        var password = $.trim($('#employee_password').val());    
        $.ajax({
            type: "POST",
            async: "false",
            url: "checkpass.php",
            data: "password="+password,
            dataType:'json',  //added this so the response is in json
            success: function(result) {
                var arr=result.success;
                if(arr == "Successful")
                {    return true;
                }
                else
                {    return false;
                }
            }
        });

  return false
}

이것을 먹어보세요.

해결책은, 이렇게 콜백으로 작업하는 것입니다.

$(function() {

    var jForm = $('form[name=form]');
    var jPWField = $('#employee_password');

    function getCheckedState() {
        return jForm.data('checked_state');
    };

    function setChecked(s) {
        jForm.data('checked_state', s);
    };


    jPWField.change(function() {
        //reset checked thing
        setChecked(null);
    }).trigger('change');

    jForm.submit(function(){
        switch(getCheckedState()) {
            case 'valid':
                return true;
            case 'invalid':
                //invalid, don submit
                return false;
            default:
                //make your check
                var password = $.trim(jPWField.val());

                $.ajax({
                    type: "POST",
                    async: "false",
                    url: "checkpass.php",
                    data: {
                        "password": $.trim(jPWField.val);
                    }
                    success: function(html) {
                        var arr=$.parseJSON(html);
                        setChecked(arr == "Successful" ? 'valid': 'invalid');
                        //submit again
                        jForm.submit();
                    }
                    });
                return false;
        }

    });
 });

이거 한 번 해봐요.

var ajaxSubmit = function(formE1) {

            var password = $.trim($('#employee_password').val());

             $.ajax({
                type: "POST",
                async: "false",
                url: "checkpass.php",
                data: "password="+password,
                success: function(html) {
                    var arr=$.parseJSON(html);
                    if(arr == "Successful")
                    { 
                         **$("form[name='form']").submit();**
                        return true;
                    }
                    else
                    {    return false;
                    }
                }
            });
              **return false;**
        }

var ajaxSubmit = () => {
  var password = $.trim($('#employee_password').val());
    
  ajaxsync(password, (value) => {
    if (value) {
      alert(`user Login`);
    } else {
      alert(`user not Login`);
    }
  });
}

var ajaxsync = (password, callback) => {
  $.ajax({
    type: "POST",
    url: "checkpass.php",
    data: "password="+password,
    success: function(html) {
      var arr = $.parseJSON(html);
      if (arr == "Successful") {
        callback(true);
      } else {
        callback(false);
      }
    }
  });
}

언급URL : https://stackoverflow.com/questions/13971769/how-to-make-jquery-ajax-request-synchronous