duanhui7329 2016-03-31 19:47
浏览 66
已采纳

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

I have 3 different files:

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>

Inside the test2.php I have some php code where I have an input from the user to choose a certain option. When the option is chosen, The select has an onclick button which callbacks to my two functions: ajaxPreTier(index) and ajaxPostTier(index). Then it goes to ajax.php Inside my ajax.php I have added the functions that I'm using but the functions setPreTierImg() and setPostTierImg() are always unidentified. enter image description here

  • 写回答

2条回答 默认 最新

  • douse8732 2016-03-31 20:37
    关注

    Give your select the id tier and the image that needs to change 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);

   });

});

    No need for Ajax or posts.. just Javascript

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条