คําเตือน: API นี้เลิกใช้งานแล้ว โปรดใช้ Google Charts ที่มีการดูแลอย่างดีแทน ดูรายละเอียดได้ที่นโยบายการเลิกใช้งาน

หน้านี้ได้รับการแปลโดย Cloud Translation API

คําขอ POST

เอกสารนี้จะอธิบายสาเหตุและวิธีขอรูปภาพโดยใช้ HTTP POST

ภาพรวม

หากขอรูปภาพในโค้ด หรือหากต้องการ URL ที่ยาวกว่า 2,000 ตัว คุณจะต้องส่งคําขอรูปภาพโดยใช้ HTTP POST เซิร์ฟเวอร์อินโฟกราฟิกรองรับคําขอ HTTP POST ที่ยาวไม่เกิน 16K

ต่อไปนี้คือตัวอย่างคําขอ POST พื้นฐานที่สุด โดยใช้องค์ประกอบ <form>

รูปภาพนี้เป็นหน้าเว็บที่โฮสต์ใน <iframe> รหัสแบบฟอร์มมีดังนี้

<form action='https://chart.googleapis.com/chart' method='POST'>
  <input type='hidden' name='cht' value='qr' />
  <input type='hidden' name='chs' value='300x300' />
  <input type='hidden' name='chl' value='This is my QR code'/>
  <input type='submit'  />
</form>

การตอบกลับคําขอ POST ที่ถูกต้องเป็นรูปภาพ PNG เหมือนกับการตอบกลับคําขอ GET

เคล็ดลับ: บางเบราว์เซอร์จะแคชคําขอไปยัง URL ที่เจาะจง ดังนั้นแม้คุณจะเปลี่ยนพารามิเตอร์ POST ก็ตาม เบราว์เซอร์ก็จะไม่สืบค้นเซิร์ฟเวอร์ภาพจริงๆ กรณีนี้อาจทําให้เกิดปัญหาเมื่อพยายามโหลดรูปภาพที่มีการเปลี่ยนแปลงบ่อย (ซึ่งอาจเป็นปัญหาในระหว่างการทดสอบ) หากต้องการแก้ไขปัญหานี้ ให้เพิ่ม ?chid=value ต่อท้าย URL ของ POST โดย value จะปรับเปลี่ยนตามคําขอทั้งหมด โดยเซิร์ฟเวอร์รูปภาพจะไม่สนใจพารามิเตอร์นี้ จากนั้นเบราว์เซอร์จะส่งคําค้นหาอีกครั้ง ไม่ใช่แค่โหลดเวอร์ชันที่แคชไว้ซ้ํา

POST นั้นทําได้หลายวิธี และทุกวิธีจําเป็นต้องมีการเขียนโค้ดเพิ่มเติมทั้งในโค้ดของหน้าเว็บหรือบนเซิร์ฟเวอร์ที่โฮสต์หน้า หากต้องการใช้ POST มักจะสร้างหน้าแยกต่างหากสําหรับรูปภาพแต่ละรูป และฝังหรือลิงก์ไปยังหน้าเหล่านี้ในหน้าหลักโดยใช้ <iframe> หรือเป็นแท็ก <img> ดังที่แสดงด้านล่าง

ต่อไปนี้เป็นตัวอย่างการใช้ POST กับทั้ง JavaScript และ PHP

การใช้ JavaScript สําหรับคําขอ POST

วิธีที่ง่ายที่สุดในการส่งคําขอ JavaScript POST คือการสร้างหน้าที่โฮสต์แบบฟอร์มที่มีข้อมูลรูปภาพในองค์ประกอบ <input> และกําหนดให้หน้า POST ยอมรับคําขอในเครื่องจัดการ onLoad() แล้วหน้าเว็บจะแทนที่ด้วยรูปภาพ PNG หน้าที่โฮสต์รูปภาพนี้ควรมีหน้านี้โดยใช้ <iframe> โค้ดสําหรับหน้ารูปภาพมีดังนี้

หมายเหตุ: ตัวอย่างด้านล่างมีพารามิเตอร์ chid ที่ตั้งค่าไว้เป็นค่าที่เปลี่ยนแปลงใน URL ซึ่งจะทําให้เบราว์เซอร์รีเฟรชด้วยเหตุผลที่อธิบายไว้ในเคล็ดลับด้านบน หากรูปภาพไม่มีการเปลี่ยนแปลงบ่อย คุณก็ไม่จําเป็นต้องเพิ่มพารามิเตอร์นั้น

post_infographic.html

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type='application/javascript'>
    // Send the POST when the page is loaded,
    // which will replace this whole page with the retrieved image.
    function loadGraph() {
      var frm = document.getElementById('post_form');
      if (frm) {
       frm.submit();
      }
    }
  </script>
  </head>
  <body onload="loadGraph()">
    <form action='https://chart.googleapis.com/chart' method='POST' id='post_form'
          onsubmit="this.action = 'https://chart.googleapis.com/chart?chid=' + (new Date()).getMilliseconds(); return true;">  <input type='hidden' name='cht' value='qr' />
      <input type='hidden' name='cht' value='qr' />
      <input type='hidden' name='chs' value='300x300' />
      <input type='hidden' name='chl' value='This is my QR code' />
      <input type='submit'  />
    </form>
  </body>
</html>

หากใช้องค์ประกอบ <form> คุณไม่จําเป็นต้องเข้ารหัส URL สตริง

จากนั้นระบบจะโหลดรูปภาพนี้ไปยังหน้าอื่นได้โดยใช้ <iframe> ในหน้าโฮสต์ เช่น

other_page.html

<iframe src="post_infographic.html" width="300" height="200"></iframe>

การใช้ PHP สําหรับคําขอ POST

ภาษาฝั่งเซิร์ฟเวอร์ส่วนใหญ่รองรับคําขอ POST ที่ชัดเจน ต่อไปนี้คือตัวอย่างการส่งคําขอ POST โดยใช้ PHP ตัวอย่างนี้แสดงหน้าที่สร้างคิวอาร์โค้ดที่มีค่าแบบสุ่ม 150 ค่า หากต้องการใช้ส่วนนี้ ให้ปรับแต่งอาร์เรย์ $qrcode เพื่อรวมค่าของคุณเอง

imageserver-image.php

<?php
  // Create some random text-encoded data for a QR code.
  header('content-type: image/png');
  $url = 'https://chart.googleapis.com/chart?chid=' . md5(uniqid(rand(), true));
  $chd = 't:';
  for ($i = 0; $i < 150; ++$i) {
    $data = rand(0, 100000);
    $chd .= $data . ',';
  }
  $chd = substr($chd, 0, -1);

  // Add image type, image size, and data to params.
  $qrcode = array(
    'cht' => 'qr',
    'chs' => '300x300',
    'chl' => $chd);

  // Send the request, and print out the returned bytes.
  $context = stream_context_create(
    array('http' => array(
      'method' => 'POST',
      'content' => http_build_query($qrcode))));
  fpassthru(fopen($url, 'r', false, $context));
?>

การฝังรูปภาพนี้ง่ายกว่าตัวอย่าง JavaScript เนื่องจากคุณชี้ไปที่หน้า POST ด้วยแท็ก <img> ได้ ดังที่แสดงด้านล่างนี้

other_page.html

<img width='300' height='300' src='imageserver-image.php'>