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背景图片网址来更改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);

Answer 2

非常简单。您需要在成功的ajax回调中更改css属性'background-image'。试试这应该有所帮助：

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

祝你好运！

按钮单击获取表单后更改映像的bootstrap / JS / Ajax

2 个答案: