提交表单而不重新加载页面

Posted

技术标签:

【中文标题】提交表单而不重新加载页面【英文标题】：Submit form without page reloading 【发布时间】：2021-11-12 08:59:02 【问题描述】：

我有一个分类网站，在展示广告的页面上，我正在创建一个“向朋友发送提示”表单...

因此，任何想要的人都可以将广告提示发送给一些朋友的电子邮件地址。

我猜表单必须提交到 php 页面，对吧？

<form name="tip" method="post" action="tip.php">
  Tip somebody: 
  <input 
    name="tip_email"
    type="text" 
    size="30" 
    onfocus="tip_div(1);" 
    onblur="tip_div(2);"
  />
  <input type="submit" value="Skicka Tips" />
  <input type="hidden" name="ad_id" />
</form>

提交表单时，页面会重新加载...我不希望这样...

有什么方法可以让它不重新加载并仍然发送邮件？ 最好不用ajax或jquery...

【问题讨论】：

要发送一个表单，你必须发出一个 HTTP 请求，Ajax 的意思是在不加载页面的情况下发出 HTTP 请求。不妨试试不开车去城里。 “没有 ajax 或 jquery”听起来像“我想要一辆没有***的汽车” @Keith 差不多，&lt;iframe&gt; 和 target 属性会做到这一点。 您没有专门使用 XmlHttpRequest，但您仍在使用 javascript 异步调用服务器。这属于 Ajax。 我读了标题并想“啊，他只需要 Ajax”。我一边喝咖啡，一边在脑海中准备答案，一边进一步阅读了这个问题。问题结束时，我的咖啡满屏了…… 【参考方案1】：

我发现了一种我认为更简单的方法。 如果您在页面中放置一个 iframe，您可以将操作的退出重定向到那里并使其显示出来。 当然，你什么也做不了。在这种情况下，您可以将 iframe 显示设置为无。

<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
    <input type="submit" value="Skicka Tips">
    <input type="hidden" name="ad_id" value="2">            
</form>

【讨论】：

我用过action="about:blank" 这样，还能不能抓取到诸如：$_POST["ad_id"]之类的值 想知道为什么没有选择这个作为答案！省了头疼。 irishwill200，没有 这看起来是一个很好的答案。但是使用这种方法是不可能处理不同的错误代码和验证错误的。但是对于为某人创建一些示例代码，这可能会派上用场。【参考方案2】：

您需要提交一个 ajax 请求来发送电子邮件，而无需重新加载页面。看看http://api.jquery.com/jQuery.ajax/

你的代码应该是这样的：

$('#submit').click(function() 
    $.ajax(
        url: 'send_email.php',
        type: 'POST',
        data: 
            email: 'email@example.com',
            message: 'hello world!'
        ,
        success: function(msg) 
            alert('Email Sent');
                       
    );
);

表单将在后台提交到send_email.php 页面，该页面需要处理请求并发送电子邮件。

【讨论】：

如果你也包含 html 会是什么样子？ 那个 send_email.php 应该是 "send_email.php"？ 你将如何仅使用带有 JavaScript 的普通 AJAX 来做到这一点？ 如果表单还在刷新，在最后一个右括号前添加return false; 这个答案需要 jquery 依赖。 2020 年的现代解决方案是使用 this answer 中所述的 XMLHttpRequest。【参考方案3】：

你要么使用 AJAX，要么你

创建 iframe 并将其附加到文档中 将 iframe 名称设置为“foo” 将表单目标设置为“foo” 提交 让表单操作使用“parent.notify(...)”渲染 javascript 以提供反馈 您可以选择移除 iframe

【讨论】：

那仍然是 Ajax。不是 XHR，但仍然是 Ajax。 绝招谢谢。使用示例&lt;form id="myGiswebForm" method="post" action="https://******/saveForm.asp" target="myiframe"&gt; 和&lt;iframe style="display:none;" src="" name="myiframe"&gt;&lt;/iframe&gt;【参考方案4】：

最快最简单的方法是使用 iframe。 在页面底部放置一个框架。

&lt;iframe name="frame"&gt;&lt;/iframe&gt;

在你的表单中这样做。

<form target="frame">
</form>

并使框架在您的 css 中不可见。

iframe
  display: none;

【讨论】：

应该是display:none; 而不是border:0px。尝试过编辑，但我的编辑被似乎懒得看编辑评论的审稿人拒绝了。请修改您的答案以修复代码。 我建议通过 id 或 class 调用 css。 这是一个巨大的救生员。我有一个包含 50 多个输入字段的非常详细的表单，我害怕每次在开发模式下都必须重新填写它。现在我不必了。强烈推荐此解决方案用于开发目的。【参考方案5】：

在不重新加载页面的情况下提交表单并在同一页面上获取提交数据的结果。

这是我在互联网上找到的一些解决此问题的代码：

1.) IFRAME

当表单被提交时，动作将被执行并针对特定的 iframe 重新加载。

index.php

<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>

iframe_content.php

<?php
$Submit = isset($_POST['Submit']) ? $_POST['Submit'] : false;
$Name = isset($_POST['Name']) ? $_POST['Name'] : '';
if($Submit)
 echo $Name;

?>

2.) AJAX

索引.php：

<form >
    <input type="" name="name" id="name">
    <input type="" name="descr" id="descr">
    <input type="submit" name="" value="submit" onclick="return clickButton();">
</form>
<p id="msg"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function clickButton()
    var name=document.getElementById('name').value;
    var descr=document.getElementById('descr').value;
    $.ajax(
        type:"post",
        url:"server_action.php",
        data: 
          
           'name' :name,
           'descr' :descr
        ,
        cache:false,
        success: function (html) 
        
           alert('Data Send');
           $('#msg').html(html);
        
    );
    return false;
 
</script>

server_action.php

<?php 
$name = isset($_POST['name']) ? $_POST['name'] : '';
$descr = isset($_POST['descr']) ? $_POST['descr'] : '';


echo $name;
echo $descr;

?>

标签： phpajaxjqueryserversidehtml

【讨论】：

谢谢先生，你抓住了我的心，继续加油 @MuhammadAli，很高兴来到这里 :)。 我在网上搜索了很多次。我使用的是 Jquery，但 Jquery 有时有效，有时无效，所以我认为 ajax 是您回答中提到的最佳选择。【参考方案6】：

在这种情况下，必须得到jquery-ajax 的帮助。没有ajax，目前没有解决办法。

首先，在提交表单时调用一个 JavaScript 函数。只需设置onsubmit="func()"。即使调用该函数，也会执行提交的默认操作。如果它被执行，将无法阻止页面刷新或重定向。因此，下一个任务是防止默认操作。在func() 的开头插入以下行。

event.preventDefault()

现在，不会有重定向或刷新。因此，您只需从 func() 进行 ajax 调用，然后在调用结束时执行您想做的任何事情。

示例：

表格：

<form id="form-id" onsubmit="func()">
    <input id="input-id" type="text">
</form>

Javascript：

function func()
    event.preventDefault();
    var newValue = $('#input-field-id').val();
    $.ajax(
        type: 'POST',
        url: '...',
        data: ...,
        datatype: 'JSON',
        success: function(data)...,
        error: function()...,
    );

【讨论】：

【参考方案7】：

这正是它可以在没有 jQuery 和 AJAX 的情况下工作的方式，并且使用简单的 iFrame 就可以很好地工作。我喜欢它，适用于 Opera10、FF3 和 IE6。感谢上面的一些海报为我指明了正确的方向，这是我在这里发帖的唯一原因：

<select name="aAddToPage[65654]" 
onchange="
    if (bCanAddMore) 
        addToPage(65654,this);
    
    else 
        alert('Could not add another, wait until previous is added.'); 
        this.options[0].selected = true;
    ;
" />
<option value="">Add to page..</option>
[more options with values here]</select>

<script type="text/javascript">
function addToPage(iProduct, oSelect)
    iPage = oSelect.options[oSelect.selectedIndex].value;
    if (iPage != "") 
        bCanAddMore = false;
        window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
        window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
        window.hiddenFrame.document.formFrame.submit();
    

var bCanAddMore = true;</script> 

<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>

生成上面调用的页面的 php 代码：

if( $_GET['p'] == 'addProductToPage' )  // hidden form processing
  if(!empty($_POST['iAddToPage'])) 
    //.. do something with it.. 
  
  print('
    <html>
        <body>
            <form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
                <input type="hidden" name="iProduct" value="" />
                <input type="hidden" name="iAddToPage" value="" />
            </form>
        </body>
    </html>
  ');

【讨论】：

不要使用 PHP print 打印 HTML 代码。只需关闭 php 标签?&gt; 并在之后添加 html 代码。并避免使用exit，这是不必要的（致命错误，...） 是的，感谢您指出。这只是一个必要的例子，我的系统中并没有这样做。 这个答案有很多工作要做，但还有很多其他的。 唯一的问题是其中的 get()，因为我不希望表单状态簿可标记/可缓存。【参考方案8】：

这应该可以解决您的问题。在此代码中，单击提交按钮后，我们调用 jquery ajax 并将 url 传递给 post键入 POST/GET 数据：数据信息，您可以选择输入字段或任何其他字段。 成功：如果服务器一切正常，则回调 函数参数文本，html 或 json，来自服务器的响应 如果你得到的数据处于某种状态，你可以写写警告，依此类推。或执行您的代码下一步该做什么。 

<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" id="submit" value="Skicka Tips"/>
 <input type="hidden" id="ad_id" name="ad_id" />
 </form>
<script>
$( "#tip" ).submit(function( e ) 
    e.preventDefault();
    $.ajax(
        url: tip.php,
        type:'POST',
        data:
        
            tip_email: $('#tip_email').val(),
            ad_id: $('#ad_id').val()
        ,
        success: function(msg)
        

            alert('Email Sent');
                       
    );
);
</script>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。 举报者/评论者： For code-only answers such as this one, downvote, don't delete!【参考方案9】：

您可以尝试将表单的目标属性设置为隐藏的 iframe，这样包含该表单的页面就不会被重新加载。

我尝试过文件上传（我们知道这不能通过 AJAX 完成），效果很好。

【讨论】：

【参考方案10】：

您是否尝试过使用 iFrame？没有ajax，原始页面不会加载。

您可以将提交表单显示为 iframe 内的单独页面，并且在提交时，外部/容器页面不会重新加载。此解决方案不会使用任何类型的 ajax。

【讨论】：

【参考方案11】： 
function Foo()  
   event.preventDefault(); 
 $.ajax(     
      url:"<?php echo base_url();?>Controllername/ctlr_function",
      type:"POST",
      data:'email='+$("#email").val(),
      success:function(msg)        
         alert('You are subscribed');
      
      );

我多次尝试了一个好的解决方案，@taufique 的回答帮助我得出了这个答案。

注意：不要忘记将event.preventDefault();放在函数体的开头。

【讨论】：

【参考方案12】：

我做了类似于上面的 jquery 的操作，但我需要重置我的表单数据和图形附件画布。 所以这就是我想出的：

    <script>
   $(document).ready(function()

   $("#text_only_radio_button_id").click(function()
       $("#single_pic_div").hide();
       $("#multi_pic_div").hide();
   );

   $("#pic_radio_button_id").click(function()
      $("#single_pic_div").show();
      $("#multi_pic_div").hide();
    );

   $("#gallery_radio_button_id").click(function()
       $("#single_pic_div").hide();
       $("#multi_pic_div").show();
                 );
    $("#my_Submit_button_ID").click(function() 
          $("#single_pic_div").hide();
          $("#multi_pic_div").hide();
          var url = "script_the_form_gets_posted_to.php"; 

       $.ajax(
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function()  
       document.getElementById("html_form_id").reset();
           var canvas=document.getElementById("canvas");
    var canvasA=document.getElementById("canvasA");
    var canvasB=document.getElementById("canvasB");
    var canvasC=document.getElementById("canvasC");
    var canvasD=document.getElementById("canvasD");

              var ctx=canvas.getContext("2d");
              var ctxA=canvasA.getContext("2d");
              var ctxB=canvasB.getContext("2d");
              var ctxC=canvasC.getContext("2d");
              var ctxD=canvasD.getContext("2d");
               ctx.clearRect(0, 0,480,480);
               ctxA.clearRect(0, 0,480,480);
               ctxB.clearRect(0, 0,480,480);        
               ctxC.clearRect(0, 0,480,480);
               ctxD.clearRect(0, 0,480,480);
                );
           return false;
                );    );
           </script>

这对我来说很有效，对于您只是一个 html 表单的应用程序，我们可以像这样简化这个 jquery 代码：

       <script>
        $(document).ready(function()

    $("#my_Submit_button_ID").click(function() 
        var url =  "script_the_form_gets_posted_to.php";
       $.ajax(
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function()  
       document.getElementById("html_form_id").reset();
             );
           return false;
                );    );
           </script>

【讨论】：

【参考方案13】：

如果您不想使用 javascript，页面将被重新加载

【讨论】：

...或者做一些丑陋的事情，比如 &lt;iframe name="ew" /&gt; 和 &lt;form target="ew" /&gt; 他们从来没有说过没有 JS，而是“最好没有 ajax 或 jquery”【参考方案14】：

您将需要使用 JavaScript 而不会导致 iframe（丑陋的方法）。

你可以用 JavaScript 来做；使用 jQuery 会让一切变得轻松。

我建议您查看 AJAX 和 Posting。

【讨论】：

【参考方案15】：

如果您要提交到表单所在的同一页面，您可以编写表单标签而无需执行任何操作，它会像这样提交

<form method='post'> <!-- you can see there is no action here-->

【讨论】：

【参考方案16】：

另一种可能性是直接 javascript 链接到您的函数：

<form action="javascript:your_function();" method="post">

...

【讨论】：

【参考方案17】：

我不懂 JavaScript，我刚开始学习 PHP，所以所有这些回复对我有帮助的是：

    创建 inedx.php 并插入： 
<iframe name="email" style=""></iframe>
<form action="email.php" method="post" target="email">
<input type="email" name="email" >
<input type="submit" name="Submit" value="Submit">
</form>
    创建 email.php 并插入此代码以检查您是否正在获取数据（您应该在 iframe 中的 index.php 上看到它）： 
    <?php
    if (isset($_POST['Submit']))
    $email = $_POST['email'];
    echo $email;
    
    ?>
    如果一切正常，将 email.php 上的代码更改为： 
    <?php
    if (isset($_POST['Submit']))
    $to = $_POST['email'];
    $subject = "Test email";
    $message = "Test message";
    $headers = "From: test@test.com \r\n";
    $headers .= "Reply-To: test@test.com \r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    
    mail($to, $subject, $message, $headers);
    
    ?>

希望这对像我这样的其他新手有帮助:)

【讨论】：

【参考方案18】：

这是一些用于发布到 php 页面并返回 html 的 jQuery：

$('form').submit(function() 
    $.post('tip.php', function(html) 
       // do what you need in your success callback
    
    return false;
);

【讨论】：

想解释一下您投反对票的原因吗？没有 Ajax 就无法实现 @Keith 我没有反对，但也许是因为你提到了 jQuery 而他说没有 jQuery。 这些是 post 方法的错误参数，您没有从表单中收集任何数据，而是使用通用的“应用于所有表单”选择器和“发布到特定 uri”从表单中获取操作”后调用。 哦，天哪。 jQuery 会进行类型检查，因此可以跳过参数。糟糕。 是的，他们到处都这样做。欢迎使用 jQuery API

以上是关于提交表单而不重新加载页面的主要内容，如果未能解决你的问题，请参考以下文章

在浏览器中重新加载/刷新页面而不重新提交表单？

提交表单而不重新加载页面[重复]

我想提交表单而不重新加载页面并且没有 OK 消息 [关闭]

Blazor - 提交表单而不重新加载（没有 JS）

如何在 Laravel 中提交 PUT 方法表单而不重新加载页面？

如何在IE浏览器中重新加载/刷新页面而不使用JS弹出表单重新提交