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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • douyuepi6485 2016-03-31 20:29
    关注

    You are misunderstanding something.

    1. PHP is pre-processor for html. Remember that php file is translated into static html file when client requests. php does not understand javascript. Meaning that <script src="ajax.js"></script> will not executed. That line will be treated as a plain text. Move setPreTierImg and setPostTierImg outside of javascript file and paste them after <?php tag if you want to call inside your php file.
      Then, this will fix your undefined function call error.

    2. Dynamic DOM manipulation is the part of javascript which is totally executed on the client side.
      Apparently, you are trying to change image url dynamically on user selection. Technically, you can do it (see $.getScript) but, seriously don't have to.
      just change those Img function into javascript format and attach listener on them, not ajax function.

    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 求局部放电案例库，用于预测局部放电类型
  • ¥100 QT Open62541
  • ¥15 stata合并季度数据和日度数据
  • ¥15 谁能提供rabbitmq，erlang，socat压缩包，记住版本要对应
  • ¥15 Vue3 中使用 `vue-router` 只能跳转到主页面？
  • ¥15 用QT，进行QGIS二次开发，如何在添加栅格图层时，将黑白的矢量图渲染成彩色
  • ¥50 监控摄像头 乐橙和家亲版 保存sd卡的文件怎么打开？视频怎么播放？
  • ¥15 Python的Py-QT扩展库开发GUI
  • ¥60 提问一下周期性信信号的问题
  • ¥15 jtag连接不上fpga怎么办