การใช้ Jquery POST ค่าจากที่เราเก็บไว้ใน localstorage ขึ้น Server

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

การใช้ Jquery POST ค่าจากที่เราเก็บไว้ใน localstorage ขึ้น Server

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

การใช้ Jquery POST ค่าจากที่เราเก็บไว้ใน localstorage ขึ้น Server ที่รับด้วย PHP
บางครั้งเราจำเป็นต้องทำงานเก็บข้อมูลต่างๆ ไว้ที่ local storage ก่อนเพื่อทำงานหลายอย่าง หรือ หลายๆหน้าเก็บไว้ใน local storage ก่อน หรือ บางครั้งฟอร์มข้อมูลเรามีช่องเก็บข้อมูลมากเกิดไปก็สามารถนำเทคนิคนี้ไปใช้ได้ ครับ (Input form มีขนาดจำกัด)
มาดูกันเลยครับ
ส่วนของ HTML เพือทำฟอร์มแบบนี้ขึ้นมา
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (3.16 KiB) Viewed 2321 times
วิธีใช้คือ พิมค่าในช่อง Username แล้วกด Set LS Javascript ก็จะเก็บข้อมูลไว้ใน local storage ให้เรา
กด ปุ่ม Send To Server ก็จะ POST ค่าไปที่ Server ในที่นี้จะทำตัวรับด้วย PHP
ส่วนของ HTML

โค้ด: เลือกทั้งหมด

    <div class="row">
      <div class="col-sm-4">
        <div class="row">
          <label class="col-sm-3" for="username">Username</label>
          <div class="col-sm-9">
            <input class="form-control text-right" type="text" id="username" /> 
          </div>
          <br/><br/>
          <div class="col-sm-12 text-right">
            <button class="btn btn-default" id="setLS">Set LS</button> &nbsp;
            <button class="btn btn-primary" id="sendLS">Send To Server</button> &nbsp; 
            <button class="btn btn-danger" id="clearLS">Clear LS</button>
          </div>
        </div>
      </div>
    </div>
ส่วนของ Javascript

โค้ด: เลือกทั้งหมด

<script>
$(function() {
  $('#setLS').click(function(e) {
    e.preventDefault();
    var username = $('#username').val();
    window.localStorage.setItem("PortalLoginApp.userName", username);
  });
  $('#clearLS').click(function(e) {
    e.preventDefault();
    localStorage.clear(); 
    $('#username').val('');
  });
  $('#sendLS').click(function(e) {
    e.preventDefault();
    var userName = window.localStorage.getItem("PortalLoginApp.userName");
    $.ajax({
           url: 'post.php',
           data: {userName: userName},
           type: 'POST' 
    }).done(function(resp) {
          alert(resp);
    });
   });
});
</script>
ส่วนของ PHP

โค้ด: เลือกทั้งหมด

post.php
    <?php
    $username = !empty($_POST['userName']) ? $_POST['userName'] : false;
    if ($username) {
      echo "Hello, {$username}";
    }
    else {
      echo "Who's there?";
    }		

ไว้คราวหน้า จะมาแนะนำการ POST ค่าจะจากการเก็บที่ Local Store เป็น array แล้ว Post ให้ Server ทางฝั่ง Python บ้าง
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การใช้ Jquery POST ค่าจากที่เราเก็บไว้ใน localstorage ขึ้น Server

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ไฟล์เต็มๆ

โค้ด: เลือกทั้งหมด

<!doctype html>
<html>
<head>
<title>Send local storage value to server using AJAX</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper">
  <header>
    <div class="container">
    <h1 class="col-lg-9">Send local storage value to server using AJAX</h1>
    
    </div>
  </header>
  <div class="container">
    <h5>Author: Julian Hansen, September 2016</h5>
    <p>Enter a username and click <b>Set LS</b> to write to LocalStorage.<br/> 
       Click <b>Send to Server</b> to send the value to the server.<br/>
       Click <b>Clear</b> to Clear Local Storage value</p>
<div class="row">
      <div class="col-sm-4">
        <div class="row">
          <label class="col-sm-3" for="username">Username</label>
          <div class="col-sm-9">
            <input class="form-control text-right" type="text" id="username" /> 
          </div>
          <br/><br/>
          <div class="col-sm-12 text-right">
            <button class="btn btn-default" id="setLS">Set LS</button> &nbsp;
            <button class="btn btn-primary" id="sendLS">Send To Server</button> &nbsp; 
            <button class="btn btn-danger" id="clearLS">Clear LS</button>
          </div>
        </div>
      </div>
    </div>
<!-- INCLUDE "t1603.php:PHP" -->
</div>
</div>
<footer>
  <div class="container">
    Copyright Julian Hansen &copy; 2016
  </div>
</footer>
 
<script src="http://code.jquery.com/jquery.js"></script>
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
  $('#setLS').click(function(e) {
    e.preventDefault();
    var username = $('#username').val();
    window.localStorage.setItem("PortalLoginApp.userName", username);
  });
  $('#clearLS').click(function(e) {
    e.preventDefault();
    localStorage.clear(); 
    $('#username').val('');
  });
  $('#sendLS').click(function(e) {
    e.preventDefault();
    var userName = window.localStorage.getItem("PortalLoginApp.userName");
    $.ajax({
           url: 't1603.php',
           data: {userName: userName},
           type: 'POST' 
    }).done(function(resp) {
          alert(resp);
    });
   });
});
</script>
</body>
</html>
ต้นฉบับ
http://www.marcorpsa.com/ee/t1603.html

ถ้าจะเอามาทดสอบ แนะนำให้แยกไฟล์ php ตามชื่อใน post แรกนะครับ
ส่วน css, javascript อย่าลืมลิงค์เข้ามาใช้งาน
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 65