欢迎访问广州天荣科技,专注网站建设 · 模板定制 · 源码下载
加入VIP

留言表单实现ajax提交弹窗提示成功

更新时间:2023-07-24 浏览:
留言表单实现ajax提交弹窗提示成功
价格: 免费

(图1)

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


HTML表单:

 

 

 

 


JavaScript代码:



$(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('留言提交失败!');
      }
    });
  });
});

在上面的代码中,我们使用JQuery库的Ajax函数来提交表单数据。当提交成功时,我们使用alert函数弹出一个提示框,告诉用户留言成功;当提交失败时,我们同样使用alert函数弹出一个提示框,告诉用户留言失败。


想要这个模板?联系我们获取下载方式

QQ在线咨询 ☎拨打电话 微添加微信 ↑返回顶部