2016-08-26 24 views
1

私の問題は、現在のコードでphp_page.phpの値が表示されないということです。返された値をjsonのページで呼び出される

写真をダブルクリックするだけで、入力が表示されます。私はその入力(例えば300)に数字を入力し、入力をぼかすと自分の画像が戻ってくるので、私のphp_page.phpの結果がJSONで表示されます!

これは単なるテキストスクリプトです。私はこの時点で新しいアイデアや異なるアプローチを探しているわけではありません。コードを変更して動作させる方法を知りたいだけです。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
<style> 
    .el{ 
    display: none; 
    height: 30px; 
    width: 30px; 
    } 
.photo{ 
width: 100px; 
height:100px; 
} 

</style> 
</head> 
<body> 
<img src="ana.jpg" id="eu" class="photo" ></img> 
    <input type="text" id="maine" class="el" value=" "></input> 
    <script> 
    $(document).ready(function(){ 
     $("#eu").on({ 
    dblclick:function() 
    { 
    document.getElementById("maine").style.display="block"; 
    document.getElementById("eu").style.display="none"; 
    } 
    }); 
    } 
    ); 
    $("#maine").on ({ 
    blur:function() 
    { 
    var blue=$("#maine").val(); 
    alert(blue); 
    document.getElementById("maine").style.display="none"; 
document.getElementById("eu").style.display="block"; 
    var x="document"; 
     var dataString = "album" + blue; 
      $.ajax({ 
url: "php_page.php", 
type: "POST", 
    dataType:'json', 
    data: datastring, 
    success: function(data){ 
    $("#responseArea").text(data); 
    } 
    }); 
     $('#maine').val(' '); 
     } 
    }); 
    </script> 
    <p id="responseArea"> </p> 
    </body> 
    </html> 

と私のPHPページ:

<?php 
$ada=$_GET["album"]; 
echo (json_encode($ada)); 
?> 
+0

'タイプ: "POST"'と '$ _GET [ "アルバム"]'ビット矛盾しているようです。 'type:" GET "または' $ _POST ["album"] ' – apokryfos

+0

JSON.parse(data) –

+0

を使用してください。var dataString =" album "+ blue; to:var dataString = {album:blue}; – gaetanoM

答えて

0

オーバーエンジニアこのする必要はありません。 ajax関数にオブジェクトを渡すことができ、jQueryが正しいクエリーを作成します。 $_GETで値にアクセスする場合は、GETタイプを使用する必要があります。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">  </script> 
 
<style> 
 
    .el{ 
 
    display: none; 
 
    height: 30px; 
 
    width: 30px; 
 
    } 
 
.photo{ 
 
width: 100px; 
 
height:100px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 
<img src="ana.jpg" id="eu" class="photo" ></img> 
 
    <input type="text" id="maine" class="el" value=" "></input> 
 
    <script> 
 
    $(document).ready(function(){ 
 
     $("#eu").on({ 
 
    dblclick:function() 
 
    { 
 
    document.getElementById("maine").style.display="block"; 
 
    document.getElementById("eu").style.display="none"; 
 
    } 
 
    }); 
 
    } 
 
    ); 
 
    $("#maine").on ({ 
 
    blur:function() 
 
    { 
 
    var blue=$("#maine").val(); 
 
    alert(blue); 
 
    document.getElementById("maine").style.display="none"; 
 
document.getElementById("eu").style.display="block"; 
 
    var x="document"; 
 
     
 
      $.ajax({ 
 
url: "php_page.php", 
 
type: "GET", 
 
    dataType:'json', 
 
    data: { "album": blue }, 
 
    success: function(data){ 
 
    $("#responseArea").text(data); 
 
    } 
 
    }); 
 
     $('#maine').val(' '); 
 
     } 
 
    }); 
 
    </script> 
 
    <p id="responseArea"> </p> 
 
    </body> 
 
    </html>

関連する問題