Question

我正在使用phonegap和jquery mobile在服务器端构建一个web应用程序django。首先，我从index.html页面开始，从服务器注入一个登录表单到index.html，并将页面更改为包含登录表单的jquery移动页面。但问题是表单是提交但不是在ajax中提交，但如果我在Web浏览器中测试它，它就可以了。我已经在config.xml文件中列出了白名单。的的index.html

<!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

<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>

问题是，如果我可以发出Ajax GET请求，为什么我不能发出POST请求。任何帮助表示赞赏。感谢。

Answer 1

好的，我已经通过在表单标记上设置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);
              }
             });
          });
        });

如何在phonegap中执行Ajax Post请求

1 个答案: