javascript 如何轻松创建单页Web应用程序？

bvhaajcl 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(122)

制作单页面Web应用程序的最简单方法是什么？在该应用程序中，将有两个输入文本（其中输入变量a、b）和一个用于访问python脚本以显示接收到的URL处的图像的按钮

def get_pic(a,b):
    *magic*
    return *pic url*

我试过Django，但是因为我是初学者，我不明白如何将python函数调用分配给按钮。也许有尽可能简单的方法，没有不必要的麻烦，我需要一个初级的界面，如附图所示

P.S.在此之前，我从事于用PyQt创建桌面应用程序，在那里要容易得多，你只需在编辑器中拖放必要的按钮、文本块，然后用Python将函数绑定到它们，但对于Web应用程序，据我所知，它不会工作

JavaScript

来源：https://stackoverflow.com/questions/63216106/how-to-easily-create-a-single-page-web-application

1条答案

按热度按时间

1l5u6lss1#

如果你需要简单的例子，如何只拾取值从2个输入，并发送他们下来的电线在这里你去。

var btn = document.querySelector('button') ;
var in1 = document.querySelector('#nr1') ;
var in2 = document.querySelector('#nr2') ;
var img = document.querySelector('img') ;
// event on button click
btn.addEventListener( 'click', function() {
  // bails. ..todo, security ?..?
  if( !parseInt(in1.value) || !parseInt(in2.value) ) return;
  // take values from input1 and input2 and replace attribute, browser will do ajax for you and render it
  img.setAttribute( 'src', "https://placehold.it/" + in1.value + "x" + in2.value )
});

.img, .frm{
  float: left; 
  width: 49%;
  padding-left: 1%
}

<div class="img">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" />
</div>

<div class="frm">
  <input id="nr1"> <p>&nbsp;</p>
  <input id="nr2"> <p>&nbsp;</p>
  <button>Render</button>
</div>

这个例子将在两个字段中选取整数，并将它们发送到免费的后端服务，后端服务将返回图像。
你必须用你的后端服务url替换https://placehold.it/，并且像我一样发送url参数。你的服务需要返回图像的url或者我的类型image/png等等。脚本负责处理安全性，边缘情况，回退图像等等。

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 如何轻松创建单页Web应用程序？

1条答案

相关问题

热门标签

最新问答