信息表单实现ajax提交弹窗提示成功

混沌w

于 2024-12-11 09:41:48 发布

阅读量301

点赞数 2

文章标签： ajax okhttp 前端

本文链接：https://blog.youkuaiyun.com/wsawyzyq/article/details/144391005

版权

表单可以通过Ajax来实现提交并弹出成功提示框。使用Ajax提交表单可以避免页面的重新加载和刷新，同时也可以提供更好的用户体验。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
         <style>
.lianxi{
    position: relative;
    top:32.5%;
    width: 15%;
    height: 300px;
    margin:0px auto;
    background-color:#b9ecf3b3;
    border-radius: 10px;
    display: none;
}
.ubiao{
    position: relative;
    top: 50px;
    height: auto;
    width: 80%;
    line-height: 4;
    margin: 0px auto;
}
.ulianxi{
    width: 100%;
    height: 40px;
    border-radius: 10px;
    padding-left: 2px;
}
.tijiao{
    width: 80%;
    height: 40px;
    position: relative;
    top: 80px;
    left: 10%;
    border-radius: 8px;
    background-color: #D3FA83;
    color: grey;
}
.jiameng{
    color: white;
    width: 80%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 8%;
}
</style>
</head>
<body>
  <div class="lianxi">
     <h2 class="jiameng">诚邀加盟</h2>
     <div class="chahao"><i class="iconfont icon-chahao" style="color: white;"></i></div>
   <form action="addlianxi.php"method="post" id="myform">
     <div class="ubiao">
     <input type="text" name="uname" placeholder="&nbsp;&nbsp;&nbsp;姓名" class="ulianxi" >
     </div>
     <div class="ubiao">
<input type="text" name="uphone" max-length="11" placeholder="&nbsp;&nbsp;&nbsp;联系电话" class="ulianxi">
      </div>
      <input type="submit" value="预约联系" class="tijiao">
   </form>
  </div>
<script>
      $(document).ready(function(){
        $('#myform').submit(function(event){
          // 防止表单默认提交
          event.preventDefault();
          
          // 使用Ajax提交表单
          $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success: function(data){
              // 提交成功，弹出提示框
              alert('提交成功，请留意客服电话！');
            },
            error: function(){
              // 提交失败，弹出提示框
              alert('提交失败！');
            }
          });
        });
      });
</script>
</body>
</html>