2012-11-07 4 views
0

jsonp를 실험 중입니다.JSONP에서 Ajax를 사용할 때 기대 응답이 없음

현재 아래에 나열된 아약스가있는 html 페이지가 있으며 테이블과 함께 드롭 상자 양식이 포함되어 있습니다. 헤더 만 초기에 있고 다른 셀을 채우기 위해 jsonp 응답을 얻는 아약스에 달려있다.

나는 또한 내 응답 PHP도 호스팅하고, 나는 모든 것이 정확하다고 생각했지만 분명히 아니었다.

내 모든 ID가 정확하지 않은 것 같습니다. 하나를 간과하지 않으면 jsonp 페이지의 오류 응답이 왜 나올지 이해할 수 없습니다.

HTML 페이지 :

<html> 
<head> 
     <title>Car Queries</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() 
     { 
       $("#submitbutton").click(function() 
       { 
         $.ajax(
         { 
           url: "https://example.com/jsonServer.php", 
           type: "GET", 
           dataType: "jsonp", 
           jsonp: "callback", 
           data: { car: $("#carselection").val()}, 
           success: function(data) 
           { 
             if(data.name == "error") 
             { 
               $("#outputcarname").text("There is no such car available"), 
               $("#price").text(" "), 
               $("#mpg").text(" "); 
             } 
             else 
             { 
               $("#outputcarname").text("data.name"), 
               $("#price").text("data.price"), 
               $("#mpg").text("data.mpg "); 
             } 
           }, 
           error: function() 
           { 
             $("#outputcarname").text("There is a problem with the server"), 
             $("#price").text(" "), 
             $("#mpg").text(" "); 
           } 
         }); 
       return false; 
       }); 
     }); 
     </script> 
</head> 
<body> 

     <h1>Cars Cars Cars!</h1> 
     <form action="" method="POST"> 

     <select id="carselection"> 
       <option selected="selected">Pick a Car</option> 
       <option value="Maxima">Maxima</option> 
       <option value="Element">Element</option> 
       <option value="Prius">Prius</option> 
     </select> 
     </br></br> 
     <input type="submit" id="submitbutton" value="Submit"> 
     </form> 
     </br> 
     <center><table> 
       <tr> 
         <th>Car Name</th> 
         <th>Price</th> 
         <th>MPG</th> 
       </tr> 
       <tr> 
         <td id="outputcarname"></td> 
         <td id="price"></td> 
         <td id="mpg"></td> 
       </tr> 
     </table></center> 
</body> 
</html> 

응답 JSONP/PHP :

<?php 

$cars = array('Maxima' => array('price' => '$32,780', 'mpg' => '24'), 
       'Prius' => array('price' => '$25,565', 'mpg' => '49'), 
       'Element' => array('price' => '$22,075', 'mpg' => '22')); 

if(array_key_exists($_GET['carselection'], $cars)) 
{ 
     $carname = $_GET['carselection']; 
     $results = array('name' => $carname, 'price' => $cars[$carname]['price'], 'mpg' => $cars[$carname]['mpg']); 
} 
else 
{ 
     $results = array('name' => 'error'); 
} 

$callback = htmlentities($_GET['callback'], ENT_QUOTES); 
print $callback . '(' . json_encode($results) . ')'; 
?> 

답변

1

변경

data: { car: $("#carselection").val()}, 

으로
data: { carselection: $("#carselection").val()}, 

또한 data.name, data.pricedata.mpg에서 ""을 제거해야합니다.

else 
    { 
    $("#outputcarname").text(data.name), 
    $("#price").text(data.price), 
    $("#mpg").text(data.mpg); 
관련 문제