AJAX帖子未保存，是否在没有任何控制台日志记录的情况下刷新页面？

Question

With the form, the submit button refreshes, has yet to save, and is not logging anything for some reason..

..though the same style AJAX post is working in another app, with almost identical HTML..

There have been recommendations to remove the form tags, and change the submit button to input type="button"...though with this the page literally does nothing

The API (NodeJS) is working properly, as tested with Postman..

Here's the HTML (am using handelbars templating, both server-side and client-side):

<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>

And Here's the AJAX:

$(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

Answer 1

I am not able to comment. So, i am proceeding with assumption. There are three things that i want to point out.

One, click handler should be updated to submit handler on the "form". Also, please do not remove "form" tag and "button type="submit". As these tags help in screen reader software and auto fill functionality of browsers.

Second, click handler is bound in ready event, at that time this button is not present inside DOM. So, we have two options here, either put click handler (change it to submit handler, as submit button fires both event, first it fires submit event and then click event) inside the foundAllSuccess at the last line or use jQuery "on/live" method to attach submit handler.

Third, in the click/submit handler, do event.preventDefault() and at last line do return false.

Hope this helps.