Javascript 使用jQuery加载图像而不刷新

我想在我的网站上实现。我复制了代码以便测试它是否工作。但是当我在我的网站上点击show时，图像并没有被加载，因为它在小提琴中工作。jQuery库是从页面中包含的头文件加载的。该库的名称为

jquery.min.js

。一切似乎都很好，但我不明白为什么它不起作用。请帮助我，并提前表示感谢

来自fiddle的标记：

<input id="inputBox" value="http://www.clusterflock.org/wp-content/uploads/2010/09/owl-in-a-hat.jpg"/>
<button id="loadImage">Show</button>
<br/>
<img id="image" src="" alt="No image loaded"/>

我的剧本：

<script>
$("#loadImage").click(function(){
    $("#image").attr("src", $("#inputBox").val());
});
</script>

<div id="wrapper">
  <div class="main-container height-auto" style="width: 20%">
    <?php include'side-menu.php'; ?>
  </div>
  <div class="main-container height-auto main-cont-adjust">
    <div class="container-title">
      <h3>Banner Ads on <?php echo $sf['si_name']; ?></h3>
    </div>
    <div class="divider"></div>
    <div class="member-index-container" align="right">
      <div class="mi-banner" style="margin-left: 0"><img src="images/adv-here2.png"></div>
    </div>
    <br>
    <?php echo $msg; ?>
    <div class="ads-box">
      <table class="table-list">
        <!--form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"-->
        <tr>
          <th class="left-align">Banner URL</th>
          <td class="left-align"><input type="text" name="burl" class="ad-field" required value="<?php echo $burl; ?>"></td>
        </tr>
        <tr>
          <th class="left-align">Target URL</th>
          <td class="left-align"><input type="text" name="turl" class="ad-field" required value="<?php echo $turl; ?>"></td>
        </tr>
        <tr>
          <th class="left-align">Duration</th>
          <td class="left-align"><select name="bprice" class="select-field" required>
              <?php while($bpf = $bpq->fetch()){ extract($bpf); ?>
              <option value="<?php echo $bp_id; ?>"><?php echo $bp_days; if($bp_days > 1){ echo " days at $"; }else{ echo " day at $"; } echo $bp_amount; ?></option>
              <?php } ?>
            </select></td>
        </tr>
        <tr>
          <th class="left-align">Wallet Balance: $<?php echo $pc_bal; ?></th>
          <th align="right"><input type="submit" name="buy_ad" value="Pay with Wallet" class="login-btn btn btn-black" style="width: 170px"></th>
        </tr>
        </form>

      </table>
    </div>
    <input id="inputBox" value=""/>
    <button id="loadImage">Show</button>
    <br/>
    <img id="image" src="" alt="No image loaded" />
    <div class="container-title">
      <h4>Ad Preview - This is how your Ad will look like</h4>
    </div>
    <div class="mi-banner" style="margin-left: 0; border: 1px solid #ddd;">
      <!--img src="" id="image" alt="Type or Paste banner URL and click on CHECK"-->
    </div>
  </div>
</div>

$（“#加载图像”）。单击（函数（）{
$（“#image”）.attr（“src”，$（“#inputBox”）.val（）；
});
横幅广告


图片地址
试试这个


$（文档）.ready（函数（）{
$（“#加载图像”）。在（'单击'，函数（）上{
$（“#image”）.attr（“src”，$（“#inputBox”）.val（）；
});
});

显示


用
$（document）.ready（function（）{..}）包装函数

根据您的评论“并且header.php包含在这个页面中”，所以基本上，这段代码尝试在包含jQuery之前运行。这似乎是你真正的问题。相反，您应该在页面上包含jQuery，然后在页眉上仅在jQuery不存在时加载它

您可以找到许多关于如何完成最后一部分的帖子。
代码可以工作，但url被破坏了。使用另一个图像，它会显示出来。试试这个：代码在fiddle上工作。。不在我的网站上。。我希望它在我的网站上工作。。。相同的代码是我复制的，但它不工作。请帮助。所以你应该向我们展示你的整个html代码，而不是一个所有东西都设置得干净的环境。问题更新。请检查。我对该URL没有问题。这是一件容易注意的事情。问题是代码在fiddle上工作。。不在我的网站上。。我希望它在我的网站上工作。。。相同的代码是我复制的，但它不工作。请帮助。您的jquery版本在网站？jquery v1.12.0中，该页面包含在header.php页面和header.php中。
<script>
$("#loadImage").click(function(){
    $("#image").attr("src", $("#inputBox").val());
});
</script>

<div id="wrapper">
  <div class="main-container height-auto" style="width: 20%">
    <?php include'side-menu.php'; ?>
  </div>
  <div class="main-container height-auto main-cont-adjust">
    <div class="container-title">
      <h3>Banner Ads on <?php echo $sf['si_name']; ?></h3>
    </div>
    <div class="divider"></div>
    <div class="member-index-container" align="right">
      <div class="mi-banner" style="margin-left: 0"><img src="images/adv-here2.png"></div>
    </div>
    <br>
    <?php echo $msg; ?>
    <div class="ads-box">
      <table class="table-list">
        <!--form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"-->
        <tr>
          <th class="left-align">Banner URL</th>
          <td class="left-align"><input type="text" name="burl" class="ad-field" required value="<?php echo $burl; ?>"></td>
        </tr>
        <tr>
          <th class="left-align">Target URL</th>
          <td class="left-align"><input type="text" name="turl" class="ad-field" required value="<?php echo $turl; ?>"></td>
        </tr>
        <tr>
          <th class="left-align">Duration</th>
          <td class="left-align"><select name="bprice" class="select-field" required>
              <?php while($bpf = $bpq->fetch()){ extract($bpf); ?>
              <option value="<?php echo $bp_id; ?>"><?php echo $bp_days; if($bp_days > 1){ echo " days at $"; }else{ echo " day at $"; } echo $bp_amount; ?></option>
              <?php } ?>
            </select></td>
        </tr>
        <tr>
          <th class="left-align">Wallet Balance: $<?php echo $pc_bal; ?></th>
          <th align="right"><input type="submit" name="buy_ad" value="Pay with Wallet" class="login-btn btn btn-black" style="width: 170px"></th>
        </tr>
        </form>

      </table>
    </div>
    <input id="inputBox" value=""/>
    <button id="loadImage">Show</button>
    <br/>
    <img id="image" src="" alt="No image loaded" />
    <div class="container-title">
      <h4>Ad Preview - This is how your Ad will look like</h4>
    </div>
    <div class="mi-banner" style="margin-left: 0; border: 1px solid #ddd;">
      <!--img src="" id="image" alt="Type or Paste banner URL and click on CHECK"-->
    </div>
  </div>
</div>

$(document).ready(function() {
  $("#loadImage").on('click', function() {
    $("#image").attr("src", $("#inputBox").val());
  });
});