• ajax表单提交执行成功但是没有执行回调函数,并且post变get了


    因为一时的疏忽,在写表单提交的时候写成了这样:

    <form id="addEssaysForm">
                        
          <label for="essaysTitle">标题</label>
          <input type="text" class="form-control" name="essaysTitle" id="essaysTitle" placeholder="请输入标题">
                                                                
          <label>内容</label>
          <textarea class="form-control" name="essaysContent" rows="15" style="resize: none"></textarea>
                               
          <button id="addBtn">提交</button>
    </form>


    <script>
    $("#addBtn").click(function () {
    $.ajax({
    type:"POST",
    dataType:"json",
    url:"add",
    data: $('#addEssaysForm').serialize(),
    success: function (data) {
    console.log(data);
    alert(data.msg);
    },
    error : function(result) {
    alert("系统异常!"+result);
    }
    });
    });

    </script>

    这样发现一直不走回调函数,而且提交的内容在地址栏显示出来了,明明使用的post提交的啊!

    百度了好久,后来才发现是form表单这出了问题,平时很少写前端代码,犯了这样的错误。正确的写法应该是这样的:

    <form id="addEssaysForm" onsubmit="return false" action="##" method="post">
                        
          <label for="essaysTitle">标题</label>
          <input type="text" class="form-control" name="essaysTitle" id="essaysTitle" placeholder="请输入标题">
                                                                
          <label>内容</label>
          <textarea class="form-control" name="essaysContent" rows="15" style="resize: none"></textarea>
                               
          <button id="addBtn">提交</button>
    </form>

    <script>
    $("#addBtn").click(function () {
    $.ajax({
    type:"POST",
    dataType:"json",
    url:"add",
    data: $('#addEssaysForm').serialize(),
    success: function (data) {
    console.log(data);
    alert(data.msg);
    },
    error : function(result) {
    alert("系统异常!"+result);
    }
    });
    });

    </script>
     
    <form id="addEssaysForm" onsubmit="return false" action="##" method="post">
    这里写成这样就可以了,但是具体的原因也是一个头两个大,不太明白,还请高手赐教!
  • 相关阅读:
    使用Redux管理你的React应用(转载)
    基于webpack使用ES6新特性(转载)
    在SublimeText上搭建ReactJS开发环境(转载)
    Javascript 严格模式详解
    HTML5探秘:用requestAnimationFrame优化Web动画
    requestAnimationFrame,Web中写动画的另一种选择
    Gulp自动添加版本号(转载)
    一小时包教会 —— webpack 入门指南
    React 入门实例教程(转载)
    走向视网膜(Retina)的Web时代
  • 原文地址:https://www.cnblogs.com/wlv1314/p/12987525.html
Copyright © 2020-2023  润新知