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

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

javascript php html ajax forms jquery

Javascript 提交表单而不重新加载页面,javascript,php,html,ajax,forms,jquery,serverside,Javascript,Php,Html,Ajax,Forms,Jquery,Serverside,我有一个分类广告网站，在显示广告的页面上，我正在创建一个“向朋友发送提示”表单所以任何想要的人都可以把广告的提示发送给一些朋友的电子邮件地址我猜表单必须提交到php页面，对吗给某人小费：提交表单时，页面会重新加载。。。我不想那样有没有办法让它不重新加载，仍然发送邮件？最好不要使用ajax或jquery…以下是一些jquery，用于发布到php页面并返回html： $('form').submit(function() { $.post('tip.php', functio

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

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

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


给某人小费：

提交表单时，页面会重新加载。。。我不想那样

有没有办法让它不重新加载，仍然发送邮件？

最好不要使用ajax或jquery…

以下是一些jquery，用于发布到php页面并返回html：

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

如果您不想使用javascript，页面将被重新加载。您可以使用AJAX，也可以使用

创建iframe并将其附加到文档中
将iframes名称设置为“foo”
将表单目标设置为“foo”
提交
让表单操作使用“parent.notify（…）”呈现javascript以提供反馈
您可以选择删除iframe

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

我尝试了文件上传（我们知道这不能通过AJAX实现），效果非常好。

您需要使用JavaScript，而不会产生

iframe

（丑陋的方法）

你可以用JavaScript来做；使用jQuery将使它变得轻松

我建议你看看AJAX和post

您需要提交一个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

页面，该页面需要处理请求并发送电子邮件。

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

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

这正是它在没有jQuery和ajax的情况下的工作方式，并且使用简单的iFrame工作得非常好。我喜欢它，在歌剧10、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>


添加到第页。。
[此处有更多带有值的选项]
函数添加页（IPProduct、oSelect）{
iPage=oSelect.options[oSelect.selectedIndex].value；
如果（iPage！=“”）{
bCanAddMore=false；
window.hiddenFrame.document.formFrame.ipproduct.value=ipproduct；
window.hiddenFrame.document.formFrame.iAddToPage.value=iPage；
window.hiddenFrame.document.formFrame.submit（）；
}
}
var bCanAddMore=true；

生成上面调用的页面的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>
  ');
}

if（$\u GET['p']=='addProductToPage'）{//隐藏表单处理
如果（！空（$\u POST['iAddToPage']））{
//用它做点什么。。
}
打印（'
');
}

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

以你的方式做这件事

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

在这种情况下，必须借助

jqueryajax

。如果没有ajax，目前就没有解决方案

首先，在提交表单时调用JavaScript函数。只需设置

onsubmit=“func（）”

。即使调用了该函数，也会执行提交的默认操作。如果执行此操作，则无法停止页面刷新或重定向。所以，下一个任务是阻止默认操作。在

func（）

的开头插入以下行

现在，将没有重定向或刷新。因此，您只需从

func（）

进行ajax调用，并在调用结束时执行您想执行的任何操作

示例：

表格：

我找到了我认为更简单的方法。如果在页面中放置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>

函数Foo（）{
event.preventDefault（）；
$.ajax（{
url:“控制器名称/ctlr_函数”，
类型：“POST”，
数据：'email='+$（“#email”）.val（），
成功：函数（msg）{
警报（“您已订阅”）；
}
}   );
}

我多次尝试寻找一个好的解决方案，@taufique的回答帮助我找到了这个答案

NB：不要忘记放置

event.preventDefault（）在函数体的开头。
这应该可以解决您的问题。
在这段代码中，单击提交按钮后，我们调用jquery ajax，并将url传递给post
键入post/GET

数据：您可以选择输入字段或任何其他数据信息。

成功：如果服务器上一切正常，则回调

函数参数文本，html或json，来自服务器的响应

在success中，如果获得的数据处于某种状态等，则可以编写警告。或者执行你的代码，然后做什么。



给某人小费：
$（“#提示”）。提交（功能（e）{
e、 预防默认值（）；
$.ajax({
url:tip.php，
类型：'POST'，
数据：
{
tip_email:$（'tip_email'）.val（），
广告id:$（'#广告id'）.val（）
},
成功：功能（msg）
{
警报（“已发送电子邮件”）；
}               
});
});
如果您提交到表单所在的同一页面，您可以在不执行操作的情况下编写表单标记，表单将提交，如下所示
<form method='post'> <!-- you can see there is no action here-->

我做了类似于上面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>


$（文档）.ready（函数（）{
$（“#仅文本_）单选按钮_
function func(){
    event.preventDefault();
    var newValue = $('#input-field-id').val();
    $.ajax({
        type: 'POST',
        url: '...',
        data: {...},
        datatype: 'JSON',
        success: function(data){...},
        error: function(){...},
    });
}

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

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');
      }
   }   );
}

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

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

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

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

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

<?php
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.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>
    <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>

<?php 
$name = $_POST['name'];
$descr = $_POST['descr'];


echo $name;
echo $descr;

?>

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

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

    <?php
    if (isset($_POST['Submit'])){
    $email = $_POST['email'];
    echo $email;
    }
    ?>

    <?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);
    }
    ?>