我有三个不同的文件：
ajax.js
function ajaxPreTier(index) {
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action: 'setPreTierImg', i: index},
success:function(html) {
alert(html);
}
});
}
function ajaxPostTier(index) {
$.ajax({
type: "POST",
url: 'ajax.php',
data:{action: 'setPostTierImg', i: index},
success:function(html) {
alert(html);
}
});
}
ajax.php
<!-- ajax.php -->
<script>
function setPreTierImg() {
switch($_POST['i']) {
case 0:
document.getElementById("preTier").src = 'images/bronze_rank.png';
break;
case 1:
document.getElementById("preTier").src = 'images/silver_rank.png';
break;
case 2:
document.getElementById("preTier").src = 'images/gold_rank.png';
break;
case 3:
document.getElementById("preTier").src = 'images/platinum_rank.png';
break;
case 4:
document.getElementById("preTier").src = 'images/diamond_rank.png';
break;
}
}
function setPostTierImg() {
switch($_POST['i']) {
case 0:
document.getElementById("postTier").src = 'images/bronze_rank.png';
break;
case 1:
document.getElementById("postTier").src = 'images/silver_rank.png';
break;
case 2:
document.getElementById("postTier").src = 'images/gold_rank.png';
break;
case 3:
document.getElementById("postTier").src = 'images/platinum_rank.png';
break;
case 4:
document.getElementById("postTier").src = 'images/diamond_rank.png';
break;
}
}
</script>
<?php
if($_POST['action'] == 'setPreTierImg') {
setPreTierImg();
}
if($_POST['action'] == 'setPostTierImg') {
setPostTierImg();
}
?>
test2.php
<html>
<head>
---
---
<script src="ajax.js"></script>
<?php
echo "<form action='./test2.php' method='post'>
<select name='tier' style='width:100%;' onclick='ajaxPreTier(this.selectedIndex)'>
<option value='1'>Bronze</option>
<option value='2'>Silver</option>
<option value='3'>Gold</option>
<option value='4'>Platinum</option>
<option value='5'>Diamond</option>
</select>
<select name='division' style='width:100%;'>
<option value='1'>I</option>
<option value='2'>II</option>
<option value='3'>III</option>
<option value='4'>IV</option>
<option value='5'>V</option>
</select>
<select name='lp' style='width:100%;'>
<option value='1'>0-20</option>
<option value='2'>21-40</option>
<option value='3'>41-60</option>
<option value='4'>61-80</option>
<option value='5'>81-100</option>
</select>
<input type='hidden' name='product_id' value='1' />
<input type='submit' name='add_to_cart' value='Add to cart' style='width:206%;'/>
</div>
</div>
</div>";
echo '<div class="col-md-3 col-sm-6" style="width:50%;">
<div>
<div class="item-icon">
<img id="postTier" src="images/bronze_rank.png" style="width:100%"></img>
<p style="line-height: 60px;">Your finished division</p>
</div>
<div class="item-details">';
echo "<select name='post_tier' style='width:100%;' onclick='ajaxPostTier(this.selectedIndex)'>
<option value='1'>Bronze</option>
<option value='2'>Silver</option>
<option value='3'>Gold</option>
<option value='4'>Platinum</option>
<option value='5'>Diamond</option>
</select>
<select name='post_division' style='width:100%;'>
<option value='1'>I</option>
<option value='2'>II</option>
<option value='3'>III</option>
<option value='4'>IV</option>
<option value='5'>V</option>
</select>
</form>";
?>
</head>
</html>
在test2.php中，我有一些php代码，其中我有来自用户的输入来选择某个选项。当选择该选项时，select有一个onclick按钮，它会调用我的两个函数：ajaxPreTier（索引）和ajaxPostTier（指数）。然后转到ajax.php在我的ajax.php中，我添加了我正在使用的函数，但函数setPreTierImg()和setPostTierImg()总是未被识别。在此处输入图像描述
给您的选择id tier和需要更改image 的图像
$(document).ready(function(){
$("#tier").change(function(){
console.log($(this.val()); // check console for value
switch($(this).val()) {
case 0:
newsrc = 'images/bronze_rank.png';
break;
case 1:
newsrc = 'images/silver_rank.png';
break;
case 2:
newsrc = 'images/gold_rank.png';
break;
case 3:
newsrc = 'images/platinum_rank.png';
break;
case 4:
newsrc = 'images/diamond_rank.png';
break;
}
$("#image").attr("src",newsrc);
});
});
不需要Ajax或帖子。。只是Javascript
你误解了什么。
-
PHP是html的预处理器。请记住，当客户端请求时，php文件会被转换为静态html文件。php不理解javascript。意味着
<script src="ajax.js"></script>不会被执行。该行将被视为纯文本。如果您想在php文件内部调用，请将setPreTierImg和setPostTierImg移到javascript文件之外，并将它们粘贴在<?php标记之后
然后，这将修复未定义的函数调用错误。 -
动态DOM操作是javascript的一部分，它完全在客户端执行
显然，您正试图在用户选择时动态更改图像url。从技术上讲，您可以做到这一点（请参阅$.getScript），但说真的，不必这么做。
只需将这些Img函数更改为javascript格式，并在其上附加监听器，而不是ajax函数。