PhoneGap Framework7 ile Ajax Kullanımı

Kodla Büyü

devcodeblog

Seçkin Üye
Seçkin Üye
Mesajlar
995
Merhabalar. Aşağıdaki Framework 7 kullanarak listeleri ajax ile çekmeye çalışıyorum. Fakat deneme.php dosyası bulunamadı diyor. index.html ve deneme.php aynı dizinde.Dosyaları sizlerle paylaşıyorum. Lütfen yardımcı olursanız sevinirim. Resimli linkler aşağıdadır.
http://prntscr.com/gw4hi1
http://prntscr.com/gw4icc

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>My App</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="css/framework7.ios.min.css">
    <link rel="stylesheet" href="css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/my-app.css">

     <script type="text/javascript" src="js/framework7.min.js"></script>

     
  </head>
  <body>
    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar-overlay"></div>
    <!-- Panels overlay-->
    <div class="panel-overlay"></div>
    <!-- Left panel with reveal effect-->
    <div class="panel panel-left panel-reveal">
      <div class="content-block">
        <p>Left panel content goes here</p>
      </div>
    </div>
    <!-- Right panel with cover effect-->
    <div class="panel panel-right panel-cover">
      <div class="content-block">
        <p>Right panel content goes here</p>
      </div>
    </div>
    <!-- Views-->
    <div class="views">
      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- We have home navbar without left link-->
            <div class="center sliding">Awesome App</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>
        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">
            <!-- Scrollable page content-->
            <div class="page-content">
           
           
            <div id="mesaj">Merhabalar</div>


              <div class="list-block">
                <ul>
                  <li><a href="about.html" class="item-link">
                      <div class="item-content">
                        <div class="item-inner"> 
                          <div class="item-title">About</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li><a href="services.html" class="item-link">
                      <div class="item-content"> 
                        <div class="item-inner">
                          <div class="item-title">Services</div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li><a href="form.html" class="item-link">
                      <div class="item-content"> 
                        <div class="item-inner">
                          <div class="item-title">Form</div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
               <!-- 
              <div class="content-block-title">Side panels</div>
              <div class="content-block">
               
                <div class="row">
                  <div class="col-50"><a href="#" data-panel="left" class="button open-panel">Left Panel</a></div>
                  <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
                </div>
                 
              </div>
            </div> -->
          </div>
        </div>
        <!-- Bottom Toolbar-->
        <!-- 
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Link 1</a><a href="#" class="link">Link 2</a></div>
        </div>  -->

      </div>
    </div>


    <script>

    var myApp = new Framework7(); 
    var $$ = Dom7;

    $$('#mesaj').on('click', function(){

         $$.ajax({
            url: "deneme.php",
            type: "POST",
            data: '',
         
            success: function (data)
            {
                alert(data);
            }
        });
    }); 
    </script>

    <!-- Path to your app js-->
   
     <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="cordova.js"></script>
 
    <script type="text/javascript" src="js/my-app.js"></script>

  </body>
</html>

deneme.php

PHP:
<?php echo "Oldu"; ?>
 
Son düzenleme:
Hocam phonegap tan falan anlamam ama merakımdan inceledim.Kullandığınız javascript fameworku ne ?
jquery de $ varken siz $$ kullanmışsınız.

deneme.php ye tarayıcı adres satırından erişmeye çalışın 400 hatası verecekmi ?

192.168.1.1200:3000/deneme.php

php kodlarınızın çalışması için apache ve php gerekli bunlar kurulumu ?
Kuruluysa apache portu 3000 mi değilse phnegap içindeki url adresindeki 3000 portunu silin.
 
Tahminin sizin pc nide web server php kurulu değil.
WAMP vb bir yazılımla apache php ve mysql i kurabilirsiniz zahmetsizce
phonegap içinde php nin yeri yok. İstemci tarafında çalışan hibrit uygulamalar yaparsınız javascript ten başkası işe yaramaz.
Eğer sunucudan veri acalaksanız sunucu uygulamanız yani php dosyalarınız web serverin www dizininde saklamalı ve phonegap uygulaması içinden http://www.adres.com/deneme.php şeklide kullanmalısınız.
local pc nize apache kurarsanız http://localhost/deneme.php demeniz yeterli olacaktır.
 
PhoneGap içerisinde Framework7 kullanıyorum. $$ işaretinin sebebi bu. Sunucu işlevini zaten PhoneGap yerine getiriyor. Olay ise deneme.php nin yolunda sıkıntı yaşamamız. Ajax ile Php sayfasını almaya çalışıyorum. Cevaplar için teşekkürler hocam.

https://phonegap.com/
http://framework7.io/
 
Dostum phonegap bilgim yok fakat sunucu olayından emin ol. http için web server işlevini yerine getiriyor fakat tahminim php için apache ve php ye ihtiyacın var. Ve gene tahminim php phonegap proje dizininde (MyApp) php dosyalarının olmaması lazım .

tarayıcınızda denediniz mi ?
192.168.1.1200:3000/deneme.php
 
Merak ettim hocam çözdünüzmü sorunu.
Birşey yazmadınız


İonic ile devam etme kararı aldım hocam. Önümde 3 seçenek ile de uzun uzadıya uğraştım. PhoneGap + Framework7 + Vue.js , Java ile Android Studio , İonic + Angular Js. Velhasıl İonic + Angular JS ile kodlamaya devam ediyorum. İnternet de bol kaynak mevcut. Hepsi içinde türkçe videolar mevcut. Phonegap ile sorunu çözemediğim için İonic + Angular ile devam ediyorum.
 
Geri
Üst