Question

我有3个不同的文件：

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（index）和ajaxPostTier（index）。然后它转到ajax.php 在我的ajax.php中，我添加了我正在使用的函数，但函数setPreTierImg()和setPostTierImg()始终未被识别。 enter image description here

Answer 1

你误解了一些事情。

PHP是html的预处理器。请记住，当客户端请求时，php文件会被翻译成静态html文件。 php不懂javascript。意味着<script src="ajax.js"></script>将不会执行。该行将被视为纯文本。将setPreTierImg和setPostTierImg移到javascript文件之外，如果要在php文件中调用，请将其粘贴到<?php标记之后。
然后，这将修复未定义的函数调用错误。
动态DOM操作是javascript的一部分，它完全在客户端执行显然，您正试图在用户选择上动态更改图像URL。从技术上讲，你可以这样做（见$.getScript），但是，我们真的不必这样做只需将Img函数更改为javascript格式并在其上附加侦听器，而不是ajax函数。

Answer 2

选择您的身份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

尝试使用Ajax和Ajax修改值时，函数未定义

2 个答案: