提交表单,无需重新加载页面

Question

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

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

我猜表单必须提交到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 ......

谢谢

Answer 1

我发现了我认为更简单的方法.如果您在页面中放置了iframe,则可以将操作的退出重定向到该页面并使其显示.当然,你什么都不能做.在这种情况下,您可以将iframe显示设置为none.

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

Answer 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需要处理请求并发送电子邮件的页面.

Answer 3

您要么使用AJAX,要么使用AJAX

• 创建iframe并将其附加到文档中
• 将iframe名称设置为'foo'
• 将表单目标设置为'foo'
• 提交
• 让表单动作使用'parent.notify(...)'呈现javascript以提供反馈
• 您可以选择删除iframe

Answer 4

无需重新加载页面即可提交表单，并在同一页面上获取提交数据的结果。

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

1.)框架

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

索引.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;

?>

标签: php ajax jquery serverside html

Answer 5

没有 XHR 或 jQuery 的现代答案

现在是 2022 年，当我们有了Fetch API和FormData API时，我们就不需要使用 XHR 或 jQuery 等旧工具了！

我们需要做的第一件事是防止发生默认的表单提交行为event.preventDefault()：

form.addEventListener("submit", function(event){
    event.preventDefault();
    // ...
});

现在我们需要用我们自己的 AJAX 请求替换提交行为。Fetch API 使发布表单数据变得非常简单 - 只需创建一个新FormData对象，用表单的值填充它，并将其用作获取请求的正文：

fetch(form.action, {
    method: "post",
    body: new FormData(form)
});

请注意，这会使用编码类型提交 HTTP 请求multipart/form-data。如果您需要使用该格式发布数据application/x-www-form-urlencoded，请从该对象创建一个新URLSearchParams对象FormData并将其用作提取的主体。¹

fetch(form.action, {
    method: "post",
    body: new URLSearchParams(new FormData(form))
});

最后，如果您想以 JSON 形式提交 HTTP 请求，请使用以下命令：²

fetch(form.action, {
    method: "post",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(Object.fromEntries(new FormData(form)))
});

这是完整的代码示例：

let form = document.querySelector("form");

form.addEventListener("submit", function(event){
    event.preventDefault();
  
    fetch(form.action, {
        method: "post",
        body: new URLSearchParams(new FormData(form)) // for application/x-www-form-urlencoded
        // body: new FormData(form) // for multipart/form-data
    });
});

<form method="POST">
  <input name="name" placeholder="Name" />
  <input name="phone" type="tel" placeholder="Phone" />
  <input name="email" type="email" placeholder="Email" />
  <input name="submit" type="submit" />
</form>

¹ 和 之间有什么区别？application/x-www-form-urlencodedmultipart/form-data

²基于“How to conversion FormData (HTML5 object) to JSON”答案的代码。请注意，如果键重复，则仅使用最后一个值。

Answer 6

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

<iframe name="frame"></iframe>

并以你的形式做到这一点.

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

并使框架在您的CSS中不可见.

iframe{
  display: none;
}

Answer 7

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

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

...

Answer 8

jquery-ajax在这种情况下，必须寻求帮助。没有ajax，目前没有解决方案。

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

event.preventDefault()

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

例子：

形式：

<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(){...},
    });
}