ใครใช้ sammy JS เข้ามาหน่อยครับ ส่งค่า POST ยังไงครับ

[tae861]

พอดีจะส่งค่า  POST ไปที่ไฟล์ search
แล้วอยากให้มัน redirect ไปที่หน้า #/search/{ค่าที่ได้รับมา คือ $_POST[name]
แนะนำหน่อยครับ ผมไม่รู้จะทำยังไง

[maneemeena]

ลองอ่าน Doc ดูครับ เรื่อง route
http://sammyjs.org/docs/routes

ส่วนตัวไม่เคยใช้ครับ เพิ่งเคยได้ยินเลย เข้าไปดู fork ใน github Latest commit 245dd7f  on Sep 3, 2014 ถือว่านานเลยนะครับ

[maneemeena]

ไหนๆก็ลองแล้ว ทดสอบดูละกันครับ ไม่ยาก

โค้ด เลือก ขยาย


        this.post('#/post/url', function() {
          this.redirect('#/search/' + this.params['name']);
        });

        this.get('#/search/:name', function() {
         alert(this.params['name']);
        });




[tae861]

ไหนๆก็ลองแล้ว ทดสอบดูละกันครับ ไม่ยาก

โค้ด เลือก ขยาย


        this.post('#/post/url', function() {
          this.redirect('#/search/' + this.params['name']);
        });

        this.get('#/search/:name', function() {
         alert(this.params['name']);
        });

แบบนี้ลองแล้วครับ มันไม่ยอม redirect ให้ เหมือน this.post ไม่ทำงานเลยครับ



[maneemeena]

กดดู log ครับ เออเรอว่าไงบ้าง

[tae861]

กดดู log ครับ เออเรอว่าไงบ้าง

กดดุยังไงครับผมโง่ Js มากๆๆ 

[maneemeena]

กดดู log ครับ เออเรอว่าไงบ้าง

กดดุยังไงครับผมโง่ Js มากๆๆ 

ในโครม คลิกขวา เลือก inspect เลือกแท็บ console ครับ มือใหม่ js ทำไมถึงเลือกใช้ framework เลยละครับ น่าจะลองหาพื้นฐานก่อนนะครับ

[tae861]

กดดู log ครับ เออเรอว่าไงบ้าง

กดดุยังไงครับผมโง่ Js มากๆๆ 

ในโครม คลิกขวา เลือก inspect เลือกแท็บ console ครับ มือใหม่ js ทำไมถึงเลือกใช้ framework เลยละครับ น่าจะลองหาพื้นฐานก่อนนะครับ

ผมให้ sammy จัดการพวก url กับ get ไฟล์แบบไม่เปลี่ยนหน้าครับ
ผมถนัด php ซ่ะส่วนใหญ่ครับ

[tae861]

code ครับ

index.html

โค้ด เลือก ขยาย

<form action="#/search/" method="post" target="_self" accept-charset="UTF-8">Search : <input name="name" type="text" id="name" size="40"><input type="submit"></form>

app.js

โค้ด เลือก ขยาย

(function($) {

  var app = $.sammy('#app', function() {
    this.use('Template');



    this.get('#/', function(context) {
      context.app.swap('');
      $.each(this.items, function(i, item) {
        context.render('templates/main.php', {id: i, item: item})
               .appendTo(context.$element());
      });
    });
   

 
  });

  $(function() {
    app.run('#/index/');
  });

})(jQuery);
ครับ

[maneemeena]

code ครับ

index.html

โค้ด เลือก ขยาย

<form action="#/search/" method="post" target="_self" accept-charset="UTF-8">Search : <input name="name" type="text" id="name" size="40"><input type="submit"></form>

app.js

โค้ด เลือก ขยาย

(function($) {

  var app = $.sammy('#app', function() {
    this.use('Template');



    this.get('#/', function(context) {
      context.app.swap('');
      $.each(this.items, function(i, item) {
        context.render('templates/main.php', {id: i, item: item})
               .appendTo(context.$element());
      });
    });
   

 
  });

  $(function() {
    app.run('#/index/');
  });

})(jQuery);
ครับ

งงเลยครับ เห็นตอนแรกถามเรื่องค้นหานี่ครับ แต่โค้ดที่โพสมันไม่เกี่ยวกันเลย อันนี้ผมทดสอบในเครื่องผม

โค้ด เลือก ขยาย


  <script type="text/javascript" charset="utf-8">
    ;(function($) {
      var app = $.sammy('#main', function() {
        this.debug = true;
        var form_fields = null;

        this.get('#/', function() {
           this.redirect('#/form');
        });

        this.get('#/search/:name', function() {
         alert(this.params['name']);
        });

        this.get('#/form', function() {
          this.partial('files/form_search.html');
        });

        this.post('#/search/query', function(context) {
  $.ajax({
          url: 'post/post.php',
  type: 'post',
  data: 'name='   this.params['name'],
          dataType: 'json',
          success: function(data) {

  if (data['name']) {
      context.redirect('#/search/'   data['name']);
  } else {
  alert("Not found!!!");
  }
           
          }

        });
         
        });

      });

      $(function() {
        app.run('#/');
      });

    })(jQuery);
  </script>



อันนี้โค้ด form_search.html

โค้ด เลือก ขยาย

<form action="#/search/query" method="post">
  <p><label for="name">Search:</label><input type="text" name="name" /></p>
  <p><input type="submit" value="Search" /></p>
</form>

อันนี้โค้ด post/post.php

โค้ด เลือก ขยาย

<?php
$json = [];

if (isset($_POST['name'])) {
$json['name'] = $_POST['name'];
}

echo json_encode($json);

ทั้งหมดทำงานปกติครับ

[tae861]

code ครับ

index.html

โค้ด เลือก ขยาย

<form action="#/search/" method="post" target="_self" accept-charset="UTF-8">Search : <input name="name" type="text" id="name" size="40"><input type="submit"></form>

app.js

โค้ด เลือก ขยาย

(function($) {

  var app = $.sammy('#app', function() {
    this.use('Template');



    this.get('#/', function(context) {
      context.app.swap('');
      $.each(this.items, function(i, item) {
        context.render('templates/main.php', {id: i, item: item})
               .appendTo(context.$element());
      });
    });
   

 
  });

  $(function() {
    app.run('#/index/');
  });

})(jQuery);
ครับ

งงเลยครับ เห็นตอนแรกถามเรื่องค้นหานี่ครับ แต่โค้ดที่โพสมันไม่เกี่ยวกันเลย อันนี้ผมทดสอบในเครื่องผม

โค้ด เลือก ขยาย


  <script type="text/javascript" charset="utf-8">
    ;(function($) {
      var app = $.sammy('#main', function() {
        this.debug = true;
        var form_fields = null;

        this.get('#/', function() {
           this.redirect('#/form');
        });

        this.get('#/search/:name', function() {
         alert(this.params['name']);
        });

        this.get('#/form', function() {
          this.partial('files/form_search.html');
        });

        this.post('#/search/query', function(context) {
  $.ajax({
          url: 'post/post.php',
  type: 'post',
  data: 'name='   this.params['name'],
          dataType: 'json',
          success: function(data) {

  if (data['name']) {
      context.redirect('#/search/'   data['name']);
  } else {
  alert("Not found!!!");
  }
           
          }

        });
         
        });

      });

      $(function() {
        app.run('#/');
      });

    })(jQuery);
  </script>



อันนี้โค้ด form_search.html

โค้ด เลือก ขยาย

<form action="#/search/query" method="post">
  <p><label for="name">Search:</label><input type="text" name="name" /></p>
  <p><input type="submit" value="Search" /></p>
</form>

อันนี้โค้ด post/post.php

โค้ด เลือก ขยาย

<?php
$json = [];

if (isset($_POST['name'])) {
$json['name'] = $_POST['name'];
}

echo json_encode($json);

ทั้งหมดทำงานปกติครับ

ทำได้แล้วครับ ผมต้องสร้าง form ไว้อีกไฟล์แล้วใช้ sammy เรียกใช้
ผมไม่สามารถสร้าง form ไว้บน index ได้เลย เหมือนมัน Error เส้นผมบังภูเขามานานเลยครับ