menampilkan gambar

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>Menampilkan Gambar dengan Ajax</title>
    <style>
    .box{
        min-width:60px;
        min-height:40px;
        max-width:200px;
        max-height:200px;
        border: 1px blue solid;
        margin:5px;
        padding:5px;
    }
    </style>
  </head>
  <body>

    <h1>Menampilkan Gambar (Ajax)</h1>
    <p>Pada kotak dibawah, tidak terdapat gambar. Pilihlah select yang tersedia</p>
    <div class='box'></div>
    <select onclick='loadImage(this)' >
    <option>Pilih dari gambar tersedia</option>
      <option value='001.jpg'>Gambar Pertama</option>
      <option value='002.jpg'>Gambar Kedua</option>
      <option value='003.jpg'>Gambar Ketiga</option>
      <option value='tidak ada.jpg'>Gambar Tidak Tersedia</option>
      <option value='005.jpg'>Gambar Kelima</option>
    </select>
    <script src='script/jquery-1.9.min.js' ></script>
    <script>
    function loadImage(p){
//=================
        val= $(p).val();
        dataJson = {name:val}

          var request = $.ajax({
           url: "show_image.php",
           type: "POST",
           data: dataJson,
           dataType: "json"
            });

        request.success(function(result) {
          $(".box").html( result.html );
         });

        request.fail(function(jqXHR, textStatus) {
          alert( "Request failed: " + textStatus );
         });
    }
    </script>
  </body>
</html>