2012-03-08 5 views
2

jquery 모바일을 사용하여 간단한 웹 앱을 만들려고합니다. Ajax 결과가 표시된 간단한 로그를 함께 표시했습니다. 문제는 내 아약스가 URL 유효 여부를 알리는 경우에도 결과를 얻지 못하는 것입니다. jquery 모바일을 사용할 때 특별한 뭔가가 있습니까?Jquery Mobile - 아약스 결과 문제 받기

모든 의견/답변을 매우 높이 평가했습니다.

<div data-role="page" id="login" data-theme="a" data-add-back-btn="true"> 
     <div data-role="header"> 
      <h2>Log in</h2> 
     </div> 
      <div data-role="content" data-theme="a" data-add-back-btn="true"> 
       <form action="mobilelogin.php" method="post"> 
        Email: <input type="text" name="email" id="useremail"> 
        Password: <input type="password" name="password" id="userpassword"> 
       <input type="submit" value="Enter"> 
       </form> 
       <div id="loginresult"></div> 
      </div> 
     <div data-role="footer"><h4>Chris Sherwood Design 2012</h4></div> 
    </div> 

JS 파일 :

$(document).ready(function() { 

    $('form').submit(function() { 
    var emailchecker = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; 
    var email = $("#useremail").val(); 
    var userpassword = $("#userpassword").val(); 
    var checklength = userpassword.length; 

    if(email == ""){ 
    alert('Please fill in email field'); 
    return false; 
    }else if(userpassword == ""){ 
    alert('Please fill in password field'); 
    return false; 
    }else if((!emailchecker.test(email))){ 
    alert('Please use a valid email'); 
    return false; 
    }else if(checklength < 6 || checklength > 6){ 
    alert('Password must be six characters'); 
    return false; 
    }else{ 
    var datastring = $(this).serialize(); 
    alert(datastring); 
    return false; 
     $.ajax({ 
     type: "POST", 
     url: "mobilelogin.php", 
     data: datastring, 
     success: function(data){ 
     $("#loginresult").html(data); 
     } 
     }); 

    } 

    }); 

PHP 코드에서

<?php 
echo 'nothing special here...'; 
?> 

답변

2

:

return false; 
    $.ajax({ 
    type: "POST", 
    url: "mobilelogin.php", 
    data: datastring, 
    success: function(data){ 
    $("#loginresult").html(data); 
    } 
    }); 
에게 여기

는 HTML 코드

아약스 요청 전에 false를 반환합니다.

편집 당신은 false를 반환하거나 이동해야합니다

(이 간단한 실수를 추가 한 더 설명이었다 가정); 아래의 아약스() 호출에, 또는과 같이 이벤트 객체를 사용

$('form').submit(function(e) { 
    e.preventDefault(); 

단지 false를 반환 사용의 문제; 그 전에 무언가에 오류가 있으면 기본 동작을 멈추지 않을 것입니다. 그래서 당신의 아약스 요청 오류가 false를 반환 놓칠 것이다; 작업 페이지로드를 시작합니다.

+0

내가 false를 반환하면 페이지가 'mobilelogin.php'로 리디렉션되고 정의되지 않습니다. 답변 더 이상 주셔서 감사합니다? – ChrisSherwood

+0

여전히 기본 제출 작업 (false 반환)을 이동하거나 이벤트 객체를 사용하여 해당 작업을 수행하지 못하게하고 싶습니다. 나는 너를 위해 나의 대답에 그것을 더 분명하게 만들 것이다. – Tjkoopa

+0

대답 - $ 아약스 ({ 을 입력합니다. "POST", URL : "mobilelogin.php" 데이터 : datastring, 성공 : 기능 (데이터) { $ ("#의 loginresult") HTML (데이터) ; } }); false를 반환합니다. 'return false;' 아약스 전화에 있어야했습니다! 항상이 게임에서 배우기! – ChrisSherwood