时间戳

首页 > 解决方案 > 如何在不重新加载页面的情况下提交数据？

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

问题描述

我一直在尝试解决这个问题很长时间。我是网络开发的新手。我想要做的是，当我单击提交按钮以提交值时，页面应该保持在它的位置，但它会自动转到顶部，这是我不想要的。

<!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>

标签： javascriptphphtmlcss

解决方案

我用最接近的方法创建了一支笔来解决这样的问题，使用 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));
});

FormData接口提供了一种方法来轻松构造一组表示表单字段及其值的键/值对。

对于 fetch API 的浏览器兼容性，请查看此链接。

推荐阅读