web前端页面

Question

一个最基础的静态首页搭建好了，可是页面上的图片文字怎么从后台获取过来， 用ajax是怎么写的？

Answer 1

后台输出一个图片地址就行了，前端动态添加，文字就更简单了。

如有接口：

/api/getInfo?type={image|text}

返回结果为图片地址或文字。

接口解释：

传入type=image，获取到图片地址

传入type=text，获取到文字

如有以下HTML：

<img id="imageContainer" />
<span id="textContainer"></span>
<button id="getImageInfo">获取图片</button>
<button id="getTextInfo">获取文字</button>

给 button#getImageInfo 和 button#getTextInfo 写事件，用jquery：

$("button#getImageInfo").click(function(){
    $.getJSON("/api/getInfo",{type:"image"},function(result){
        $("img#imageContainer").attr("src",result);
    });
});
$("button#getTextInfo").click(function(){
    $.getJSON("/api/getInfo",{type:"text"},function(result){
        $("span#textContainer").text(result);
    });
});

Answer 2

使用ajax向后台发送请求，将返回的东西替换掉静态页面上的内容。