麻烦使用jquery Ajax和php脚本从mysql中检索数据

I am having trouble with my current web app project with displaying a simple jpg picture based on what radio button is checked using jquery ajax with a php script to communicate with mysql.

我在目前的网络应用程序项目中遇到问题,显示一个简单的jpg图片,基于使用jquery ajax和php脚本与mysql进行通信来检查单选按钮。

Here is 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");
           }
           $imgEl.attr('src', json["link"]);
           alert("AJAX was a success");
      },
      cache: false
  });
});

And my kobegreat.php file:

还有我的kobegreat.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>;
      }
  }

?>

HTML code I am trying to display my 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 finally my database is setup like so:

最后我的数据库设置如下:

greatshots(name, link)

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

I know that the php script is successfully grabbing the write data from the database because all that is display under the target div is this:

我知道php脚本成功地从数据库中获取写入数据,因为目标div下显示的所有内容都是:

{"name":"kobe3","0":"kobe3","link":"images\/kobe3","1":"images\/kobe3"}

And I know that the ajax function is returning success because the alert for a successful ajax request alerts me when I select a radio button. So I'm not sure where I'm going wrong or how to fix my problem.

我知道ajax函数正在返回成功,因为当我选择一个单选按钮时,成功的ajax请求的警报会提醒我。所以我不确定我哪里出错或如何解决我的问题。

3 个解决方案

#1

$imgEl.attr('src', json["link"]);

should be

$imgEl.attr('src', data.link);

#2

You have $imgEl.attr('src', json["link"]); and var name in function is data, try $imgEl.attr('src', data.link);

你有$ imgEl.attr('src',json [“link”]);和函数中的var名称是数据,请尝试$ imgEl.attr('src',data.link);

#3

1 . change $imgEl.attr('src', json["link"]); to $imgEl.attr('src', data.link);

1。改变$ imgEl.attr('src',json [“link”]); to $ imgEl.attr('src',data.link);

2 . append the image to your DOM, by putting below code after you assign source to image element(above code).

2。在将源指定给图像元素(上面的代码)之后,通过在代码下面添加代码,将图像附加到DOM。

document.getElementById('target').appendChild($imgEl);

Assuming target to be div id where you want to display image.

假设目标是要显示图像的div id。

#1

$imgEl.attr('src', json["link"]);