javascript - 单击按钮后的 bootstrap/JS/Ajax 获取表单以更改图像

Question

我有一个带有点击按钮的提交表单，点击提交表单后，我想更改我的 html 网站中的一系列图像。

截至目前，我正在使用以下 JS 代码，但我无法定义适当的成功响应。

<script type=text/javascript>                                                                     
$(function() {
$("#valueme").click(function() {                                                                  
     $.ajax({
        type: "GET",
        url: $SCRIPT_ROOT + "/mypythonscript/",
        contentType: "application/json; charset=utf-8",                                           
        data: { 
                input1: $('input[name="input1"]').val(),
                input2: $('input[name="input2"]').val(),
              },
        success: function(data) {
            //$ ('#photo_link1_div').text(data.photo_link1);                        
            //$ ('#photo_link2_div').text(data.photo_link2);                        
        }
    });                                                                                           
 });                                                                                              
 });
</script>

mypythonscript 返回的数据是一个字典，其中包含我想在 html 站点中更改的所有图像的链接，即 mypythonscript 返回 {photolink1:'../static/img/myphoto1.jgp' ,photolink2:'../static/img/myphoto2.jgp'}.

使用此类数据，我想通过更改 DIV 背景图片 url 来更改我的 html 中的背景图片。到目前为止，我的 html 中的 DIV 看起来像(理想情况下我不必更改这部分，而是更改 JS 部分):

<div id="photo_link1_div" style="background-image: url(../static/img/anotherphotowanttochange.jpg); background-repeat: no-repeat; width: 200px; height: 310px; background-size: 100% auto;" align="center"></div>

Answer 1

在您尝试从链接更新文本属性的成功函数中，尝试更改其背景 css，如本例所示:

$ ('#photo_link1_div').css('background-image', data.photo_link1);                        
$ ('#photo_link2_div').css('background-image', data.photo_link2);