어떻게 Ajax 게시물 요청 전화 걸기

나는 웹 애플 리케이션, 서버쪽에 django를 구축하기 위해 전화 갭과 jquery 모바일을 사용하고 있습니다. 먼저 index.html 페이지에서 시작하여 서버의 로그인 양식을 index.html에 삽입하고 로그인 양식이 포함 된 jquery 모바일 페이지로 페이지를 변경합니다. 하지만 문제는 양식이 제출되고 있지만 아약스가 아니라는 것입니다. 웹 브라우저에서 테스트하면 작동합니다. 이미 백인은 config.xml 파일에 도메인 이름을 나열했습니다. index.html을어떻게 Ajax 게시물 요청 전화 걸기

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
     <title>Hello World</title> 
    </head> 
    <body> 
     <div data-role="page"> 
     <div class="app" style="display:none;"> 
      <h1>PhoneGap</h1> 
      <div id="deviceready" class="blink"> 
       <p class="event listening">Connecting to Device</p> 
       <p class="event received">Device is Ready</p> 
      </div> 
     </div> 
      <div data-role="header"> 
      <h1>DOCTORSLOG</h1> 
      </div> 
      <div data-role="content"> 
      </div> 
     </div> 
     <script type="text/javascript" src="phonegap.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
     <script type="text/javascript"> 
      app.initialize(); 
      $(function(){ 
       $.ajax({ 
       url: 'http://doctorslog.net/mobile/login-test/', 
       success: function(data){ 
        //append the response(sign-in.html) to the body 
        $('body').append(data); 
       } 
       }); 
      }); 
     </script> 
    </body> 
</html>

로그인 in.html 내가 POST 요청을 할 수없는 이유는, 아약스는 요청을 GET 할 수 있다면 문제는,이다

<div data-role="page" data-fullscreen="true" id="login"> 
     <div data-role="header" data-theme="b"> 
      <h1 id="title">DOCTORSLOG</h1> 
     </div> 
      <div data-role="content"> 
        <form id="sign_in_form" method="post" action="http://doctorslog.net/mobile/login/">{% csrf_token %} 
         <div data-role="fieldcontain"> 
         <label for="id_username" style="font-size: 1.3em;line-height: 350%;">Username</label> 
         <input id="id_username" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="text" maxlength="30" name="username" autocomplete="off"> 
         </div> 
         <div data-role="fieldcontain"> 

         <label for="id_password" style="font-size: 1.3em;line-height: 350%;">Password</label> 
         <input id="id_password" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="password" name="password"> 
         </div> 
         <div style="width: 100%;text-align: center;font-size: 1.6em;"> 
         <input id="sign-in-btn" type="submit" data-inline="true" value="Sign me in" /> 
         </div> 
         <input type="hidden" name="next" value="{% firstof next '/home/' %}"/> 
         <input id="hiddenID" type="hidden" name="regID" value=""/> 
        </form> 
      </div> 
     <script> 
      $(function(){ 
       //change active page to this page and since it is a jquery mobile page with data-role=page,i expect automatic ajax submission on clicking submit button 
       $(':mobile-pagecontainer').pagecontainer('change','#login'); 
       $('#sign_in_form').trigger('create'); 
      }); 
     </script> 
    </div>

. 어떤 도움을 주셔서 감사합니다. 감사.

출처

2014-01-28 Ananth

실제로 아약스 게시 요청을하지는 않습니다. 기본 양식 게시 요청을하는 것입니다. Ajax를 구현해보십시오. –

@Drew B jQuery에서 배운 것에서 폼 태그에 data-ajax = false를 설정하지 않으면 모바일 양식 제출이 자동으로 Ajax를 사용하여 처리됩니다. 그런데 아약스 제출을 시도했지만 작동하지 않았습니다. 로컬 파일 (index.html)에서 Ajax Post를 수행하려고했기 때문입니까? 답장을 보내 주셔서 감사합니다. – Ananth

좋아, 양식 태그에 data-ajax="false"을 설정하고 $.ajax 님이 양식을 제출하여 jquery 모바일 기본 양식 하이재킹을 사용 중지하여이 문제를 해결했습니다. $.mobile.allowCrossDomainPages과 같은 것은 없습니다. 그리고 나는 또한 서버 측에서 Access-Control-Allow-Origin 응답 헤더를 설정했는데 이것이 필요한지 정말로 알지 못했습니다. 다음은 제출할 스크립트입니다. -

$(function(){ 
    $('#sign_in_form').submit(function(e){ 
     e.preventDefault(); 
     $.mobile.loading('show'); 
     var url = $(this).attr('action'); 
     var data = $(this).serializeArray(); 
     $.ajax({ 
       beforeSend:function(jqXHR,settings){ 
       jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
        }, 
       url:url, 
       type:'POST', 
       data:data, 
       crossDomain:false, 
       success: function(data){ 
       $.mobile.loading('hide'); 
       $('body').append(data); 
       } 
      }); 
      }); 
     });

출처

2014-01-29 08:11:28 Ananth

어떻게 Ajax 게시물 요청 전화 걸기

답변

관련 문제