如何在不重新加载页面的情况下提交数据？

Question

I have been trying to solve this problem for a long long time.我一直在尝试解决这个问题很长时间。 I'm new to web developing.我是 web 开发的新手。 What I'm trying to do is that when I'm click to submit button for submitting the values, the page should remains to it's position, but instead it's automatically goes to top, which I don't want that.我想要做的是，当我单击提交按钮以提交值时，页面应该保留在它的 position 上，但它会自动转到顶部，这是我不想要的。

<!DOCTYPE html>
<html >
<head>
   <style>
   .bigbox{
    height: 600px;
    width: 500px;
    background: olive;
    margin: 10px;
}
   </style>
</head>
<body>
<div class="bigbox">1</div>
<div class="bigbox">2</div>
<h4>type the range of numbers:</h4>
    <form id="myform">
            <input type="text" name="num1" placeholder="num1">
            <input type="text" name="num2" placeholder="num2">
            <button type="submit" name="submit" value="submit">Submit</button>
            <button type="reset">Reset</button>
    </form>
    <?php
        if(isset($_GET['submit']))
        {
            $num1=$_GET['num1']; 
            $num2=$_GET['num2'];
            $prefix=array("st","nd","rd","th");
         for($j = $num1 ; $j<=$num2;$j++)
         {
             switch($j)
             {
                 case ( $j%100==11 || $j%100==12 || $j%100==13 ); $i=3; break;
                 case $j%10==1: $i=0;break;
                 case $j%10==2; $i=1;break;
                 case $j%10==3; $i=2;break;
                 default : $i=3;
             }
             echo "this is the ".$j.$prefix[$i]." number "."<br>";
         } 
        } 
    ?>
</body>
</html>

Answer 1

I have created a pen with the closest approach to solve such problem, To achieve this using javascript Fetch API我已经用最接近的方法创建了一支笔来解决这个问题，为了实现这一点，使用 javascript Fetch API

 const formElement= document.getElementById("myform");
 formElement.addEventListener('submit',(e)=>{
   e.preventDefault();
   const formData = new FormData(formElement);
   fetch(`api/url`, {
     method: 'POST',
     body: formData,
   })
   .then(result  => result .json())
   .then(data=> console.log(data)) //after form submit
   .catch((err)=>console.log(err));
});

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values. FormData接口提供了一种方法来轻松构造一组表示表单字段及其值的键/值对。

For browser compatibility of fetch API check This link .对于 fetch API 的浏览器兼容性，请查看此链接。

如何在不重新加载页面的情况下提交数据？

问题描述

1 个解决方案

解决方案1
2 2019-10-23 17:49:06

如何在不重新加载页面的情况下提交数据？

问题描述

1 个解决方案

解决方案1 2 2019-10-23 17:49:06

解决方案1
2 2019-10-23 17:49:06