Ajax请求仅在索引页面中正常工作

时间:2017-02-19 14:07:25

标签: jquery ajax cordova cordova-3

我正在使用内置在framework7中的移动应用程序模板之一来开发我在cordova上的应用程序,我需要在每个页面上发出ajax请求以从php web服务获取其数据。我在index.html页面中发出了一个请求,并且在尝试将相同的请求复制到另一个页面时工作正常并且无法正常工作

这是index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>

    <!-- font Raleway link -->  
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>

    <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">-->
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

    <!-- all css here -->
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="css/framework7.ios.min.css">
    <link rel="stylesheet" href="css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/swipebox.css">             
    <!-- font-awesome.min CSS -->      
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- style CSS -->          
    <link rel="stylesheet" href="style.css">
    <!-- style CSS -->          
    <link rel="stylesheet" href="css/responsive.css">



  </head>
  <body>
    <!-- login screen  start-->
      <div class="pagelogin">
        <div class="page-content login-screen-content registerbody">
            <div class="register-content">
                <h3><img src="img/logo2.png" alt=""></h3>
                <div style="color:#FFFFFF;width:80%;margin-left:auto;margin-right:auto;text-align:center;background-color:#FF0004;border-radius:10px;padding:5px;margin-bottom:15px;display:none" id="reslt"></div>
                <form action="SignIn()" method="post">
                    <div class="inputbox">
                        <span>Username:</span><br>
                        <input type="text" name="UserName" id="UserName" placeholder="Username">
                    </div>
                    <div class="inputbox">
                        <span>Password:</span><br>
                        <input type="password" name="Password" id="Password" placeholder="***********">
                    </div>
                    <div class="inputbox">
                        <a data-popup=".popup-forgetpass" class="open-popup"   href="#">Forget Password?</a>
                    </div>
                    <div class="inputbox">
                        <input style="background: #5c8bf7 none repeat scroll 0 0;border: medium none;color: #ffffff;height:60px;" type="button" class="button button-big" onClick="SignIn()" value="Login">
                    </div>                      
                </form> 




                <p></p>
            </div>
        </div>
      </div>
  <!-- login screen  start-->
    <!-- forget password  start-->


<script type="text/javascript">

function SignIn() {
var UserName = $("input[name=\"UserName\"]").val();
var Password = $("input[name=\"Password\"]").val();
    $.ajax({
        type       : "POST",
        url        : 'http://example.com/index.php/mobile/users/login/' + UserName + '/' + Password,
        contentType: "application/json; charset=utf-8",
        dataType   : 'json',
        cache: false,

        success: function(data) {
            if(data == 'true')
            {
                document.location = "home.html";
            }else{
                document.getElementById('reslt').style.display = "block";
                $("#reslt").html('Username or password incorrect..!');
            }
        },

        error: function(req, err){ console.log('my message : ' + err); }
    });
};


</script>






 <div class="popup popup-forgetpass">
    <div class="registerbody">
        <a href="#" class="close-popup closebutton"><i class="fa fa-times"></i></a>
        <div class="register-content">
            <h3><img src="img/logo2.png" alt=""></h3>
            <form action="#">
                <div class="inputbox">
                    <span>Email:</span><br>
                    <input type="email" name="password" placeholder="email@gmail.com">
                </div>
                <div class="inputbox">
                    <button class="button button-big">Remember me</button>
                </div>                      
            </form> 
            <p></p>
        </div>
     </div>
</div>
  <!-- forget password  end-->
  <!-- resister popup start-->
<div class="popup popup-register">
    <div class="registerbody">
            <a href="#" class="close-popup closebutton"><i class="fa fa-times"></i></a>
         <div class="register-content">
            <h3><img src="img/logo2.png" alt=""></h3>
                <form action="#">
                <div class="inputbox">
                    <span>Full Name:</span><br>
                    <input type="text" name="fulname" placeholder="Full Name">
                </div>
                <div class="inputbox">
                    <span>Username:</span><br>
                    <input type="text" name="username2" placeholder="Username">
                </div>
                <div class="inputbox">
                    <span>Email:</span><br>
                    <input type="email" name="email" placeholder="email@gmail.com">
                </div>
                <div class="inputbox">
                    <span>Password:</span><br>
                    <input type="password" name="password2" placeholder="***********">
                </div>
                <div class="inputbox">
                    <button class="button button-big">Sign Up</button>
                </div>                  
            </form>
        </div>
     </div>
</div>
  <!-- resister popup start-->  
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/Push.js"></script>
    <!-- Js -->
    <!-- jquery-1.11.3.min js -->         
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Path to Framework7 Library JS --> 
    <script type="text/javascript" src="js/framework7.min.js"></script>
    <!--jquery.swipebox js --> 
    <script type="text/javascript" src="js/jquery.swipebox.js"></script>
    <!-- Path to your app js --> 
    <script type="text/javascript" src="js/my-app.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
  </body>
</html>

这是另一个请求没有工作的页面

<!-- We don't need full layout here, because this page will be parsed with Ajax-->
<!-- Top Navbar-->
<div class="navbar">
  <div class="navbar-inner">
    <div class="left"><a href="#" class="back link"><i class="fa fa-angle-left"></i><span>Back</span></a></div>
    <div class="center sliding"><h4>Sign In</h4></div>
    <div class="right">
      <!-- Right link contains only icon - additional "icon-only" class--><a href="#" data-panel="right"  class="link icon-only open-panel"> <i class="fa fa-navicon"></i></a>
    </div>
  </div>
</div>
<div class="pages">
  <!-- Page, data-page contains page name-->
  <div data-page="about" class="page">
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="content-block">
        <div class="content-block-inner">


            <div class="register-content">
                <h3><img src="img/logo2.png" alt=""></h3>
                <div style="color:#FFFFFF;width:80%;margin-left:auto;margin-right:auto;text-align:center;background-color:#FF0004;border-radius:10px;padding:5px;margin-bottom:15px;display:none" id="reslt"></div>
                <form action="SignIn()" method="post">
                    <div class="inputbox">
                        <span>Username:</span><br>
                        <input type="text" name="UserName" id="UserName" placeholder="Username">
                    </div>
                    <div class="inputbox">
                        <span>Password:</span><br>
                        <input type="password" name="Password" id="Password" placeholder="***********">
                    </div>
                    <div class="inputbox">
                        <a data-popup=".popup-forgetpass" class="open-popup"   href="#">Forget Password?</a>
                    </div>
                    <div class="inputbox">
                        <input style="background: #5c8bf7 none repeat scroll 0 0;border: medium none;color: #ffffff;height:60px;" type="button" class="button button-big" onClick="SignIn()" value="Login">
                    </div>                      
                </form> 
            </div>




       </div>



<script type="text/javascript">
function SignIn() {
var UserName = $("input[name=\"UserName\"]").val();
var Password = $("input[name=\"Password\"]").val();
    $.ajax({
        type       : "POST",
        url        : 'http://example.com/index.php/mobile/users/login/' + UserName + '/' + Password,
        contentType: "application/json; charset=utf-8",
        dataType   : 'json',
        cache: false,
        success: function(data) {
            if(data == 'true')
            {
                document.location = "home.html";
            }else{
                document.getElementById('reslt').style.display = "block";
                $("#reslt").html('Username or password incorrect..!');
            }
        },
        error: function(req, err){ console.log('my message : ' + err); }
    });
};
</script>


        </div>
      </div>
    </div>
  </div>

任何想法尝试?

1 个答案:

答案 0 :(得分:0)

  1. 在包含jQuery之后添加脚本。
  2. 使用onSubmit="SignIn()"代替action="SignIn()"
  3. 修改表单
  4. request didn't work,出现哪些错误?
  5. 在第二页中你加载了jQuery吗?