Javascript AJAX post没有保存，并且正在刷新页面而没有任何控制台日志记录？

对于表单，“提交”按钮将刷新，尚未保存，并且由于某种原因未记录任何内容

…虽然相同风格的AJAX帖子在另一个应用程序中使用，但HTML几乎完全相同

有人建议删除表单标签，并将submit按钮更改为input type=“button”……尽管这样，页面实际上什么都不做

API（NodeJS）工作正常，经过Postman测试

以下是HTML（我使用Handelbar模板，包括服务器端和客户端）：

---

我无法发表评论。所以，我继续假设。我想指出三件事

点击处理程序应该更新为提交“表单”上的处理程序。此外，请不要删除“表单”标签和“按钮类型=“提交”。因为这些标签有助于屏幕阅读器软件和浏览器的自动填充功能

其次，click处理程序绑定在ready事件中，此时此按钮不在DOM中。因此，我们有两个选项，要么将click处理程序（更改为submit处理程序，因为submit按钮触发两个事件，首先触发submit事件，然后单击事件）放在foundAllSuccess的最后一行，要么使用jQuery“on/live”方法来附加提交处理程序

第三，在click/submit处理程序中，do event.preventDefault（）并在最后一行do返回false

---

希望这有帮助。

我觉得这不太合适。如果表单没有动作，为什么要使用表单呢？只需按一下按钮。另外

var story=$（“#newStory”）.val（）

看起来不对，因为newStory是表单本身，而不是表单element@chiliNUT带有#newStory的外观很好，这意味着表单id与字段id不同。。即便如此，它仍然没有发布。。如果您使用的是ajax，那么我认为表单根本不应该发布。我不明白如果你想使用ajax@chiliNUT非javascript回退？@chiliNUT正常，但没有任何事情发生。。我如何让它在没有？

<div id="allStories" class="allStories"> </div><!--/allStories-->
<script id="storyTemplate" type="text/x-handlebars-template">

  <div class="thisness">
      <div class="stories">

          \{{#each stories}}
              <input type="text" class="formFormat" value="\{{ story }}"/>
          \{{/each}}

          <form id="newStoryForm">
              <input type="text" id="newStory" placeholder="…" />

            <br><button type="submit" class="btn" id="AddStory">add</button>

          </form> <!--/newStoryForm-->

      </div> <!--/stories-->
    </div> <!--/thisness-->

</script>

$(document).ready(function(){

    // GET ALL
    // * * * * * * * * * * * * * * * * * * * * * * * * * * *

    function foundAllSuccess(resJSON) {

        var templateSource = $("#storyTemplate").html();

        console.log('Getting All the stories..');
        console.log(templateSource);

        var template = Handlebars.compile(templateSource);

        var storyHTML = template({stories: resJSON});

        $('#allStories').html(storyHTML);

        console.log('All is Proper');

    }

    function foundAllFailure() {
        alert(textStatus + "**:**" + errorThrown);
    }

    function refreshStories(){

        $.ajax({
            url:"http://localhost:4200/api/v1/stories",
            method:'get',
            success: foundAllSuccess,
            error: foundAllFailure

        })

    }

    refreshStories(); // gets called when the page loads


    // POST
    // * * * * * * * * * * * * * * * * * * * * * * * * * * *

    // AddStory button clicks, adding new story    
    $( "#AddStory" ).click(function() {

        // story element for API
        var story = $( "#newStory" ).val();    
        console.log(story);

        var AjaxPostData = {
            story : story
        };

        // if the story field has content
        if (story.length != 0) {
          console.log('there is a story: ' + story);
            // make an ajax call
            $.ajax({
            dataType: 'json',
            data: AjaxPostData,
            type: 'post',
                url:"http://localhost:4200/api/v1/stories",
                success: refreshStories,
                error: foundAllFailure
            });
        };

        console.log(AjaxPostData.story);

    });

}); // doc is ready