如何在不刷新页面的情况下在表单提交上显示另一个 div答案

【问题标题】：how to show another div on form submit without refreshing page如何在不刷新页面的情况下在表单提交上显示另一个 div
【发布时间】：2014-07-10 07:25:21
【问题描述】：

这是一个非常基本的
我有一个 html 表单我想要以下功能 1. 当用户点击提交按钮后，邮件发送，感谢信息出现在同一位置，无需刷新页面

这是我的html 其中有两个 div 显示文本和获取正文负载文本我正在显示获取文本 div 并且在提交时我必须显示下一个 div 但这没有发生我不知道我做错了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE></STYLE>
<script src="jquery.js"></script>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=content-type>
</head>
<body style="margin:0; padding:0;">

<div style=" width:311px; height:576px; background:url(img/bg.png) no-repeat; position:relative; ">
<div class="getText">
  <form action="" method="POST">
    <input type="text" name="name" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:235px; left:47px;   "/>
    <input type="text" name="email" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:286px; left:47px;  "/>
    <input type="text" name="" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:337px; left:47px;   "/>
    <textarea cols="23" rows="4" style="border:1px solid black; position:absolute; top:387px; left:47px;"></textarea>
    <input type="submit" name="submit" value="Submit" style="width:76px; height:27px; border:0; outline:none; color:#ffffff; background-color:#ff0000; font-weight:bold; cursor:pointer; font-size:14px; font-family:verdana; position:absolute; top:470px; left:49px;" id="sub">
  </form>
</div>
<div class="showText" style="width:247px; height:282px; background-color:#ffac00; color;#292a2a; text-align:center; font-weight:bold; font-size:14px; font-family:verdana; position:absolute; top:216px; left:28px;"><br><br><br>   
    Thank You !<br>
    You shall hear from us soon !!

</div>
</div>

<script> 
$(document).ready(function(){
    $(".showText").hide();
      ("#sub").on("click",function( ) {
      $(".showText").show();
     $(".getText").hide();

    });
});
</script>
</body>
</html>

点击提交页面正在刷新并且没有显示谢谢div我不想刷新页面

【问题讨论】：

你需要AJAX提交页面
你必须使用ajax来改变内容而不刷新整个页面

标签： forms submit

【解决方案1】：

以下是帮助您开始使用 AJAX 的内容：http://jsfiddle.net/j8rnW/

$(document).ready(function () {
    $(".showText").hide();
    $("#sub").on("click", function (e) {
        e.preventDefault();
        $.ajax({
            url: '',
            method: 'post',
            data : {}, //pass your form elements as key-value pairs
            success: function (response) {
                $(".showText").show();
                $(".getText").hide();
            }
        });
    });
});

【讨论】：

【解决方案2】：

使用 ajax 会有所帮助。或者您可以将输入类型更改为“按钮”而不是提交。因为提交总是发布表单值并刷新页面

【讨论】：