尝试使用函数和Ajax修改值时未定义函数
Function undefined while trying to modify values with it and with Ajax
我有三个不同的文件:
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函数。
相关文章:
- 将函数从onclick修改为onload
- 当客户端将两个按钮的javascript函数参数修改为相同时,SQL/PHP会更新多行
- 每次调用函数时,都要修改Javascript中的局部变量
- 我如何才能访问修改这个价格函数在马根托
- 将修改后的数组作为参数传递给函数
- Javascript函数未修改html
- 为什么不是't此函数用于修改最终输出
- JavaScript:不修改实际数组的函数
- 使用 JQuery 修改函数写入文档的数据
- 如何使用书签修改页面中的函数
- 在JavaScript中同时调用函数和修改变量
- 从链接函数修改指令控制器变量
- 从原型方法中的内部函数修改实例变量
- ajax表单,用javascript函数修改值
- Backbone JS事件函数修改对象
- 如何防止函数修改常量中的字符串
- 如何在运行的JS函数中执行函数-修改JS游戏
- 用另一个函数修改一个函数的私有变量
- 不能从pageshow函数修改innerHTML
- 节点JS可以在for循环期间通过外部函数修改数组