如何在PhoneGap中执行AJAX帖子请求

我正在使用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>

<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获取请求，为什么不能提出发布请求。任何帮助都将受到赞赏。谢谢。

好吧，我通过在表单标签上设置 data-ajax="false"并通过 $.ajax提交表单来解决jquery移动默认表单劫持范围。没有像$.mobile.allowCrossDomainPages一样工作了。而且我还设置了服务器端上的访问控制响应标头，真的不知道是否需要。这是提交形式的脚本 -

$(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);
              }
             });
          });
        });

相关内容

最新更新

热门标签：