触发瓶功能，无需重新加载页面

Question

my bottle app.py looks something like:

@route('/submit/<var>')
def submit(var):
  # do action
  redirect("/")

and i have a simple html button which redirects to the required page when clicked through

onclick="window.location.href='/submit/value'"

but this causes the whole page to effectively refresh by going to the link and then coming back straight away, putting the user to the top of the page and so on.

How can i get it to do the bottle backend without refreshing?

Answer 1

In your template:

<button type="button" onclick="onSubmit('Value')">Sumbit!</button>>
<p id="response"></p>
<script>
function onSubmit(value) {
    var myRequest = new Request('/submit/' + value);
    var myInit = { method: 'PUT' };
    fetch(myRequest, myInit).then(function(response) {
        return $("#response").text(response);
    });
}
</script>

In the python side

@put("/submit/<val>")
def submit(val):
    return "Yay it worked!"