Php Ajax To（API键）按钮单击并显示图像，无需重新加载_Php_Jquery_Ajax_Image

Php Ajax To（API键）按钮单击并显示图像，无需重新加载

php jquery ajax image

Php Ajax To（API键）按钮单击并显示图像，无需重新加载,php,jquery,ajax,image,Php,Jquery,Ajax,Image,我想做一个页面，我可以从多个API请求图像，并根据用户的选择显示它们。用户将通过点击按钮选择是否要查看猫、狗或狐狸的照片这是我创建的代码： <!DOCTYPE html> <html> <head> <title>API</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.cs

我想做一个页面，我可以从多个API请求图像，并根据用户的选择显示它们。用户将通过点击按钮选择是否要查看猫、狗或狐狸的照片

这是我创建的代码：

<!DOCTYPE html>
<html>
<head>
<title>API</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
     <br>
     <form  method="post" enctype="multipart/form-data">
        <button type="submit" id="cat" onclick="ajaxSubmit();" name="cat" class="btn btn-primary btn-lg">Cat</button>
        <button type="submit" id="dog" onclick="ajaxSubmit();" name="dog" class="btn btn-info btn-lg">Dog</button>
        <button type="submit" id="fox" onclick="ajaxSubmit();" name="fox" class="btn btn-warning btn-lg">Fox</button>

        <br>

        <img width="100" class="form-control"  style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>
    </form>
</div>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $("#cat").ajaxSubmit({url: 'https://aws.random.cat/meow', type: 'post'})
    $("#dog").ajaxSubmit({url: 'https://aws.random.cat/meow', type: 'post'})
    $("#fox").ajaxSubmit({url: 'https://aws.random.cat/meow', type: 'post'})
</script>

我试图坚持3个小时，但没有回应。


<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <br>
        <form  method="post" enctype="multipart/form-data">
            <button type="button" id="cat" name="cat" class="btn btn-primary btn-lg">Cat</button>
            <button type="button" id="dog" name="dog" class="btn btn-info btn-lg">Dog</button>
            <button type="button" id="fox" name="fox" class="btn btn-warning btn-lg">Fox</button>

            <br>

            <img width="100" class="form-control"  style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>" id="thumbnail"/>
        </form>
    </div>



    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $("#cat").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });
        $("#dog").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });
        $("#fox").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });

    </script>

美国石油学会


猫
狗
狐


“id=”缩略图“/>
$（“#cat”）。单击（函数（）{
$.ajax（{url:https://aws.random.cat/meow，成功：函数（结果）{
$（“#缩略图”）.attr（'src'，result.file）；
}});
});
$（“#狗”）。单击（函数（）{
$.ajax（{url:https://aws.random.cat/meow，成功：函数（结果）{
$（“#缩略图”）.attr（'src'，result.file）；
}});
});
$（“#fox”）。单击（函数（）{
$.ajax（{url:https://aws.random.cat/meow，成功：函数（结果）{
$（“#缩略图”）.attr（'src'，result.file）；
}});
});

试着这样做。你正在制造一些错误。

从问题的描述中可以看出，单击按钮时，你只需更改

img

的

src

。你不需要AJAX。你只需将

src

属性设置为所需的图像路径即可

还请注意，按钮需要放入

type=“button”

元素中，否则它们将提交父

表单

元素并导致页面重定向。请尝试以下操作：

$（'.btn'）。单击（函数（）{
$（'缩略图'）.prop（'src'，$（this）.data（'imgsrc'）；
})；

#缩略图{
边界：#000；
z指数：1；
位置：相对位置；
边框宽度：2倍；
浮动：左；
宽度：100px；
}


猫
狗
狐


“id=”缩略图“/>

不清楚你在问什么。你的代码也没有多大意义。在哪里定义了

ajaxSubmit（）

函数？如果您希望在

单击事件发生时触发$（“#cat”）.ajaxSubmit（..）
函数，那么Javascript或jQuery就不是这样工作的。我建议您研究事件处理程序。单击按钮并显示图像API键，而无需在ajax@rorymcrossanf中重新加载代码，您正试图通过ajax获取结果。这将不起作用，结果将不会显示在页面上。在ajax调用中，您没有处理正确的响应。同时检查服务器端代码。@GauravKhatri这是一个开放的API。因此，任何人都可以创建请求并访问数据。按钮单击并显示图像API键，而无需在ajax中重新加载。您不需要ajax来显示图像。。。？同样，这种逻辑毫无意义。请编辑此问题，以便对您想要实现的目标进行完整而清晰的描述。为什么您要发出AJAX请求以获取您已经可以通过path单独访问的文件？这种逻辑毫无意义
<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <br>
        <form  method="post" enctype="multipart/form-data">
            <button type="button" id="cat" name="cat" class="btn btn-primary btn-lg">Cat</button>
            <button type="button" id="dog" name="dog" class="btn btn-info btn-lg">Dog</button>
            <button type="button" id="fox" name="fox" class="btn btn-warning btn-lg">Fox</button>

            <br>

            <img width="100" class="form-control"  style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>" id="thumbnail"/>
        </form>
    </div>



    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $("#cat").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });
        $("#dog").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });
        $("#fox").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });

    </script>