Javascript event.PreventDefault（）和ajax POST方法有什么可能？_Javascript_Php_Jquery_Html_Ajax

Javascript event.PreventDefault（）和ajax POST方法有什么可能？

javascript php jquery html ajax

Javascript event.PreventDefault（）和ajax POST方法有什么可能？,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,问题？ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script> $('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.ph

问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});
</script>

我有一个问题，我不能使用正常的HTML帖子，因为它刷新了我的网页，导致JS控制的“标签”关闭。因此，强制用户重新打开选项卡以查看提交表单的反馈

它应该如何工作

用户在表单中输入数据，然后单击提交，表单将数据发布到自身，并通过电子邮件将数据发送到电子邮件地址。一旦数据被发送，一条消息应该取代表格，表明电子邮件已经发送。（全部不带包含表单关闭的选项卡）

Sudo代码

If (email) is complete
    {Send Email} 

echo "thank you for for your email"

}else{

Display email form

我正在尝试的解决方案？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});
</script>


$（'#form1'）。提交（函数（e）
{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:'indextest2.php'，
数据：$（“#form1”）.serialize（），
成功：功能（响应）{
}
});
});

现在，这将是伟大的，因为它停止了网页刷新和发送电子邮件，但它停止了“谢谢你的消息已被发送”的html取代的形式

因此，无论出于何种目的，用户都不知道电子邮件是否已发送，因为表单仍在那里，显示了他们输入的数据

可能的解决方法？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});
</script>

不知何故，让ajax帖子在成功发布ajax帖子时将“谢谢”消息插入到正确的div中？！这可能吗

还是我做错了什么，在执行方面

我正在使用的实际代码

 <div id="tabsContainer">
    <div class='tab one'>
      <ul>
        <li><a href="#contact-form">Inquiry Form</a></li>
      </ul>
    </div>
    <div class='content one'>
      <div id="contact-form" class="clearfix">
        <?php

  if ($_POST["email"]<>'') { 
$ToEmail = 'dancundy@hotmail.com'; 
$EmailSubject = 'EasyScrap Enquiry'; 
$mailheader = "From: ".$_POST["email"]."\r\n"; 
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n"; 
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; 
$MESSAGE_BODY = "Name: ".$_POST["FName"]."&nbsp;";
$MESSAGE_BODY .= $_POST["SName"]."<br>";
$MESSAGE_BODY .= "Tel: ".$_POST["CTNumber"];
$MESSAGE_BODY .= "<br>"."email: ".$_POST["email"].""; 
$MESSAGE_BODY .= "<br>"."Address: ".$_POST["STName"]." ".$_POST["PCode"];
$MESSAGE_BODY .= "<br>"."Comment: ".nl2br($_POST["Comment"]).""; 
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); 
?>
        <h3>Contact Us</h3>
        <P>Your message was sent, thank you! You will recieve an automated response within the next few minutes and will hear back from a Plymouth Easy Scrap representive shortly.</P>
      </div>
    </div>
  </div>
  <?php 
  }else{
      ?>
  <fieldset>
    <legend>
    <h3>Contact Us</h3>
    </legend>
    <div id="contact-area">
      <form id="form1" method="post" action="">
        <label for="FName">Name:*</label>
        <input name="FName" type="text" required placeholder="Enter your name" />
        <label for="SName">Surname:</label>
        <input name="SName" type="text" placeholder="Enter your surname" />
        <label for="STName">Street:</label>
        <input name="STName" type="text" placeholder="Enter the address" />
        <label for="PCode">PostCode:</label>
        <input name="PCode" type="text"placeholder="UK Postcode" />
        <label for="Email">Email:*</label>
        <input type="email" name="email"  required placeholder="Enter a valid email address"/>
        <label for="CTNumber">Contact:</label>
        <input name="CTNumber" type="text" placeholder="Enter a contact number"/>
        <label for="comment">Message:</label>
        <br/>
        <textarea name="Comment" rows="20" cols="20" id="Message"></textarea>
        <input type="submit" name="submit" value="Submit" class="submit-button" />
      </form>
      <div style="clear: both;"></div>
    </div>
    <div class="FormInfo">
      <p>&nbsp;</p>
      <p>*Denotes a required field</p>
    </div>
  </fieldset>
  <?php
  };
  ?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>

$('#form1').submit(function(e)
{
event.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest2.php',
     data: $("#form1").serialize(),
     success: function(response) {

     }
   });
});
</script>





联系我们
 您的信息已发送，谢谢！您将在接下来的几分钟内收到自动回复，并将很快收到普利茅斯Easy Scrape代表的回复。
联系我们
姓名：*
姓：
街道：
邮政编码：
电邮：*
联系人：
信息：



*表示必填字段
$（'#form1'）。提交（函数（e）
{
event.preventDefault（）；
$.ajax({
键入：“POST”，
url:'indextest2.php'，
数据：$（“#form1”）.serialize（），
成功：功能（响应）{
}
});
});

这是一个实际的网站，它会让你更好地理解我说的“tab”是什么意思，并希望更多地讨论这个问题

带有表单的选项卡是菜单中的“查询表单”

我真的希望有人能帮忙？

你的javascript中的事件是什么
在参数中使用事件，在函数体中使用e
参数和变量必须相同
对于您的解决方案，它应该是e
以下代码可能会帮助您

$('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { } }); });

javascript中的事件是什么
在参数中使用事件，在函数体中使用e
参数和变量必须相同
对于您的解决方案，它应该是e
以下代码可能会帮助您

$('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { } }); });

消息发送后，请将表单替换为感谢消息。这可以通过将包含表单的dom结构替换为ajax成功块中的感谢消息来实现
ajax代码：

$('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { // replace the email form with thank you message $('#targetForm').html("<div class="info">Thank you for your message !!!<div>"); } }); });

$（'#form1'）。提交（函数（e） { e、预防默认值（）； $.ajax({ 键入：“POST”， url:'indextest2.php'，数据：$（“#form1”）.serialize（），成功：功能（响应）{ //将电子邮件表单替换为“谢谢”消息 $（'#targetForm'）.html（“感谢您的留言！！！”； } }); });

快乐编码：）
消息发送后，请将表单替换为感谢消息。这可以通过将包含表单的dom结构替换为ajax成功块中的感谢消息来实现
ajax代码：

$('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { // replace the email form with thank you message $('#targetForm').html("<div class="info">Thank you for your message !!!<div>"); } }); });

$（'#form1'）。提交（函数（e） { e、预防默认值（）； $.ajax({ 键入：“POST”， url:'indextest2.php'，数据：$（“#form1”）.serialize（），成功：功能（响应）{ //将电子邮件表单替换为“谢谢”消息 $（'#targetForm'）.html（“感谢您的留言！！！”； } }); });
快乐编码：）
尝试以下方法：
indextest2.php页面：

function index(){ //Do whatever receiving the data if(Your job is done){ echo "Success"; }else{ echo "Error"; } }
ajax调用：

$(document).ready(function(){ $('#form1').submit(function(e){ e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { if(response=="Success"){ $('#contact-area').html("<div>thank you you message has been sent</div>") }else{ $('#contact-area').html("<div>Sorry Something went Wrong !</div>") } }, error: function (xhr) { alert(xhr.responseText); console.log(xhr.responseText); } }); });

$（文档）.ready（函数（）{ $（'#form1'）。提交（函数（e）{ e、预防默认值（）； $.ajax({ 键入：“POST”， url:'indextest2.php'，数据：$（“#form1”）.serialize（），成功：功能（响应）{ 如果（响应=“成功”）{ $（“#联系区域”）.html（“谢谢您的邮件已发送”） }否则{ $（“#联系人区域”）.html（“对不起，出了点问题！”） } }, 错误：函数（xhr）{ 警报（xhr.responseText）； console.log（xhr.responseText）； } }); });
此处使用的
e
是提交表单或单击提交按钮后生成的事件。然后浏览器刷新并转到
操作=“”
您在
表单中输入的url
标记。每当您使用
e.preventDefault
时，它会停止表单提交的
操作
，并执行您在下方编写的
e.preventDefault
代码。通常，人们使用
preventDefault
停止刷新
a
标记和
提交上的浏览器表单的按钮
。祝你好运。
试试以下方法：
indextest2.php页面：

function index(){ //Do whatever receiving the data if(Your job is done){ echo "Success"; }else{ echo "Error"; } }
ajax调用：

$(document).ready(function(){ $('#form1').submit(function(e){ e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { if(response=="Success"){ $('#contact-area').html("<div>thank you you message has been sent</div>") }else{ $('#contact-area').html("<div>Sorry Something went Wrong !</div>") } }, error: function (xhr) { alert(xhr.responseText); console.log(xhr.responseText); } }); });

$（文档）.ready（函数（）{ $（'#form1'）。提交（函数（e）{ e、预防默认值（）；