Question

我有index.php：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.on').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val}
                });
             });
            $('.off').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val}
                });
            });
        });
    </script>  

<body>
    <img class="bulb"  src="bulb.png" alt="...">

    <button class="on" value="http://pageon.org">On</button>
    <button class="off" value="http://pageoff.org">Off</button>
</body>

我将按钮的值发送到try.php。根据单击的按钮，我在try.php文件中获得一个变量，对于ON按钮 - 1，对于OFF按钮 - 0（变量$curl_response）。是否可以动态更改index.php文件中的img，具体取决于try.php页面中收到的变量？例如，如果收到的变量是1，src =“bulb.png”，如果是0，那么src =“bulb2.png”？

try.php：

<?php
$name = $_POST['myVar'];
    $service_url = $name;
    $curl = curl_init($service_url);

    // Ustaw opcje połączenia
    curl_setopt($curl, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4 );
    //curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $curl_response = curl_exec($curl);
    curl_close($curl);
?>

编辑：

<script type="text/javascript">
        $(document).ready(function () {
            $('.btn').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val}
success: function(result){
      switch(result){
         case "0":
           $(".bulb").attr("src", "bulb.png");
           break;
         case "1":
           $(".bulb").attr("src", "bulb2.png");
           break;          
      }
   }
      });
            });
        });
    </script>

Answer 1

是的，你可以在AJAX success上使用它：

$.ajax({
...
success: function(result){
      switch(result){
         case "1":
           $("#yourImage").attr("src", "yourImagePath1.jpg");
           break;
         case "2":
           $("#yourImage").attr("src", "yourSecondImagePath.jpg");
           break;          
      }
   }
});

修改/ SUGGESTION

如果每个按钮要调用相同的URL并传递相同的结构数据，则不需要为每个按钮触发2个单独的事件。使用相同的类来触发：

<强> HTML

<button class="buttonClass" value="http://pageon.org">On</button> <button class="buttonClass" value="http://pageoff.org">Off</button>

<强> JS

$(".buttonClass").click(function(){ var val = $(this).text(); //make here your ajax call passing 'val' });

Answer 2

查看传递给success的{{1}}选项。如果https请求状态为200，那么您就可以提供要运行的回调函数。像

这样的东西

$.ajax

有关详细信息，请参阅http://api.jquery.com/jQuery.ajax/。

Answer 3

是的，您可以根据您在ajax成功方法中收到的标志添加if-else条件，并使用JavaScript更新img src属性

Answer 4

您可以在单击其中一个按钮时发送AJAX请求并处理响应，如下所示：

<script type="text/javascript">
        $(document).ready(function () {
            $('.on, .off').click(function() {
                var val = $(this).val();
                $.ajax({
                    url: "try.php",
                    type: "POST",
                    data: {'myVar': val},
success: function(result){
      switch(result){
         case "0":
           $(".bulb").attr("src", "bulb.png");
           break;
         case "1":
           $(".bulb").attr("src", "bulb2.png");
           break;          
      }
   }
      });
            });
        });
    </script>

在JQuery中动态更改img src属性

4 个答案: