Функция успеха Ajax не работает в jQuery mobile

Question

Я пытаюсь проверить базовую форму входа с полями имени пользователя и пароля. Мне нужно подтвердить имя пользователя и пароль с check.php ajax. Нет никаких проблем в запросе и ответе ajax. Я получаю правильный ответ на странице ajax. Но функция успеха Ajax работает неправильно.

ajaxrequest.html

$(document).on('pagebeforeshow', '#login', function(){ 
     $(document).on('click', '#submit', function() { 
     if($('#username').val().length > 0 && $('#password').val().length > 0){ 
       $.ajax({ 
        url : 'serverurl/check.php', 
        data: {action : 'login', formData : $('#check-user').serialize()}, 
        type: 'post',     
        beforeSend: function() { 
         $.mobile.loading(true); 
         alert("beforesend"); 
        }, 
        complete: function() { 
         $.mobile.loading(false); 
         alert("complete"); 
        }, 
        success: function (result) { 
         console.log("Ajax response"); 
         res = JSON.stringify(result); 
         if(res.status == "success"){  
         resultObject.formSubmitionResult = res.uname; 
         localStorage["login_details"] = window.JSON.stringify(result); 
         $.mobile.changePage("#second"); 
       }else{ 
         $.mobile.changePage("#login"); 
         alert("incorrect login");   
       } 
        }, 
        error: function (request,error) { 
         alert('Network error has occurred please try again!'); 
        } 
       });     
     } else { 
      alert('Fill all fields'); 
     }   
      return false; 
     });  
}); 

Здесь я добавил мою страницу AJAX. Эта страница проверяет только имя пользователя и пароль. Наконец, он возвращает объект json. Что я делаю не так?

ServerURL/check.php

header("Access-Control-Allow-Origin: *"); 
header('Content-Type: application/json'); 
if(isset($_POST['formData']) && isset($_POST['action']) && $_POST['action'] == 'login'){ 
    parse_str($_POST['formData'],$searchArray); 
    $uname = "arun"; 
    $pwd = "welcome"; 
    $resultArray = array(); 
    if($uname == $searchArray['username'] && $pwd == $searchArray['password'])  
    { 
     $resultArray['uname'] = $searchArray['username']; 
     $resultArray['pwd'] = $searchArray['password']; 
     $resultArray['status'] = 'success'; 
    }else{ 
     $resultArray['status'] = 'failed'; 
    } 
    echo json_encode($resultArray); 
} 

Answer 1

Ваш код должен быть

success: function (result) { 
         console.log("Ajax response"); 
         //don't do this 
         //res = JSON.stringify(result); 
         if(result.status == "success"){  
         resultObject.formSubmitionResult = result.uname; 
         localStorage["login_details"] = window.JSON.stringify(result); 
         $.mobile.changePage("#second"); 
       }else{ 
         $.mobile.changePage("#login"); 
         alert("incorrect login");   
       } 

После JSON.stringify вы обращаетесь, как stringJson.status это не будет работать. его мачта «разобралась» «json object« не напрягаться.

Answer 2

Не нужно преобразовывать JSON в String.

$(document).on('pagebeforeshow', '#login', function(){ 
     $(document).on('click', '#submit', function() { 
     if($('#username').val().length > 0 && $('#password').val().length > 0){ 
       $.ajax({ 
        url : 'serverurl/check.php', 
        data: {action : 'login', formData : $('#check-user').serialize()}, 
        type: 'post',     
        beforeSend: function() { 
         $.mobile.loading(true); 
         alert("beforesend"); 
        }, 
        complete: function() { 
         $.mobile.loading(false); 
         alert("complete"); 
        }, 
        success: function (result) { 
         console.log("Ajax response"); 
         //Don't need to converting JSON to String 
         //res = JSON.stringify(result); 
         //directly use result 
         if(result.status == "success"){  
         resultObject.formSubmitionResult = result.uname; 
         localStorage["login_details"] = window.JSON.stringify(result); 
         $.mobile.changePage("#second"); 
       }else{ 
         $.mobile.changePage("#login"); 
         alert("incorrect login");   
       } 
        }, 
        error: function (request,error) { 
         alert('Network error has occurred please try again!'); 
        } 
       });     
     } else { 
      alert('Fill all fields'); 
     }   
      return false; 
     });  
}); 

Answer 3

Ваш вызов AJAX является совершенным, но тип данных не объявляется в AJAX

Попробуйте с JSon ИЛИ JSONP. Вы получите успех.

$.ajax({ 
    url : 'serverurl/check.php',      
    type: 'post', 
    dataType: "json", OR "jsonp", 
    async: false, 
    data: {action : 'login', formData : $('#check-user').serialize()}, 
     beforeSend: function() { 
     $.mobile.loading(true); 
     alert("beforesend"); 
    }, 
    complete: function() { 
     $.mobile.loading(false); 
     alert("complete"); 
    }, 
    success: function (result) { 
     console.log("Ajax response"); 
     alert(JSON.stringify(result)); // Check response in alert then parse according to that 
     res = JSON.stringify(result); 
     if(res.status == "success"){  
     resultObject.formSubmitionResult = res.uname; 
     localStorage["login_details"] = window.JSON.stringify(result); 
     $.mobile.changePage("#second"); 
}else{ 
     $.mobile.changePage("#login"); 
     alert("incorrect login");   
} 
    }, 
    error: function (request,error) { 
     alert('Network error has occurred please try again!'); 
    } 
}); 

Answer 4

В некоторых случаях ваш сервер может не вернуть ответ правильно. Вы пытались обработать фактический код ответа (например, если ваш сервер возвращает 200) следующим образом:

$.ajax({ 
     url : 'serverurl/check.php', 
     data: {action : 'login', formData : $('#check-user').serialize()}, 
     type: 'post', 
     .... 
     statusCode: { 
       200: function (response) { 
         // do your stuff here 
        } 
     } 
});