Delphi WebBroker and jquery AJAX
下面是网页 html 代码:(注意第一行,如果这个网页由 WebBroker 输出,不能缺少第一行后面双引号的内容部分,否则中文乱码)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="../js/jquery.min.js"></script>
<script>
$(function(){
// This jquery function can get image src string from server and show image.
$.get("titlepic?imgNo=1", function(data,status){
$('#img1').attr("src", data);
}
);
})
</script>
<title> </title>
</head>
<body>
<div id="banner">
<img src="../1.jpg" / class="banner-img">
</div>
<div class="thumbnail">
<img id="img1" class="title-img" />
</div>
</body>
</html>
--------------------
WebBroker code:
procedure TWebModule1.WebModule1WebActionTitlepicAction(Sender: TObject;
Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
Id, PicName: string;
i: Integer;
begin
Id := Request.QueryFields.Values['ImgNo'];
i := 0;
TryStrToInt(Id, i);
case i of
0: PicName := '0.jpg';;
1: PicName := '2.jpg';
2: PicName := '3.jpg';
3: PicName := '4.jpg';
4: PicName := '5.jpg';
end;
Response.Content := FUploadImagePath + PicName;
end;
-------------------------
备注:
上述代码中,jquery 代码:
$.get("titlepic?imgNo=1", function(data,status){$('#img1').attr("src", data);
1. "titlepic?imgNo=1" 是 ajax 向服务器发出 get 请求的 URL 路径。对应到 WebBroker 里面的 titlepic 路径的事件代码。
2. "#img1" 对应的是 html 页面中 id 为 img1 的标签(这个标签是一个 <img>)。也就是将从服务器获得的图片的地址赋值给这个 img 标签,图片因此就显示出来了。
3. 这个 jquery 代码是异步执行的。网页里面的 ajax 最好异步执行,避免因网络问题阻塞死浏览器。
上述代码中,WebBroker 的代码:
ajax 里面访问的路径里面的 ?imgNo=1 ,在 WebBroker 里面就是:Request.QueryFields.Values['imgNo'] 就能把客户端访问的 URL 中的等号后面的编号 1 读到。