使用jquery ajax访问php脚本返回的JSON

Basically my program is a web page with 5 radio buttons to select from. I want my web app to be able to change the picture below the buttons every time a different button is selected.

基本上我的程序是一个网页,有5个单选按钮可供选择。我希望我的网络应用程序能够在每次选择不同按钮时更改按钮下方的图片。

My problem is coming in the JSON decoding stage after receiving the JSON back from my php scrip that accesses the data in mysql.

我的问题是在从我访问mysql中的数据的php脚本中收到JSON之后进入JSON解码阶段。

Here is my code for my ajax.js file:

这是我的ajax.js文件的代码:

$('#selection').change(function() {
   var selected_value = $("input[name='kobegreat']:checked").val();

   $.ajax( {
       url: "kobegreat.php",
       data: {"name": selected_value},
       type: "GET",
       dataType: "json",

       success: function(json) {
           var $imgEl = $("img");
           if( $imgEl.length === 0) {
               $imgEl = $(document.createElement("img"));
               $imgEl.insertAfter('h3');
               $imgEl.attr("width", "300px");
               $imgEl.attr("alt", "kobepic");
           }
           var link = json.link + ".jpg";
           $imgEl.attr('src', link);
           alert("AJAX was a success");
      },
      cache: false
  });
});

And my php file:

我的php文件:

<?php


   $db_user = 'test';
   $db_pass = 'test1';       

   if($_SERVER['REQUEST_METHOD'] == "GET") {
       $value = filter_input(INPUT_GET, "name");
   }

   try {
       $conn = new PDO('mysql: host=localhost; dbname=kobe', $db_user, $db_pass);
       $conn->setAttribute(PDO:: ATTR_ERRMODE, PDO:: ERRMODE_EXCEPTION);
       $stmt = $conn->prepare('SELECT * FROM greatshots WHERE name = :name');
       do_search($stmt, $value);
  } catch (PDOException $e) {
      echo 'ERROR', $e->getMessage();
  }

  function do_search ($stmt, $name) {
      $stmt->execute(['name'=>$name]);

      if($row = $stmt->fetch()) {
          $return = $row;
          echo json_encode($return);
      } else {
          echo '<p>No match found</p>;
      }
  }

?>

Here's my HTML code where I am trying to post the image to.

这是我的HTML代码,我试图将图像发布到。

<h2>Select a Great Kobe Moment.</h2>
<form id="selection" method="get">
   <input type="radio" name="kobegreat" value="kobe1" checked/>Kobe1
   <input type="radio" name="kobegreat" value="kobe2"/>Kobe2
   <input type="radio" name="kobegreat" value="kobe3"/>Kobe3
</form>

<div id="target">
    <h3>Great Kobe Moment!</h3>
</div>

And here's is what my database looks like:

这是我的数据库的样子:

greatshots(name, link)

name         link
------       --------
kobe1        images/kobe1
kobe2        images/kobe2
kobe3        images/kobe3

Whenever I run the web app right now, the rest of the images on the page disappear and the image I am trying to display won't show up. I get the alert that "AJAX was a success" though, but nothing comes of it other than the alert. Not sure where I am going wrong with this and any help would be awesome.

每当我立即运行Web应用程序时,页面上的其余图像都会消失,我尝试显示的图像将不会显示。我得到了“AJAX成功”的警报,但除了警报之外什么都没有。不知道我在哪里出错了,任何帮助都会很棒。

1 个解决方案

#1

As mentioned you should parse the JSON response using JSON.parse(json);.

如前所述,您应该使用JSON.parse(json);解析JSON响应。

Also, you should specifically target the div element with a simpler setup: $("#target").append('<img width="300px" src="' + link + '.png"/>');

此外,您应该使用更简单的设置专门定位div元素:$(“#target”)。append(' 使用jquery ajax访问php脚本返回的JSON ');

#1