1
votes

I have a problem loading from the web service, and I get an error:

Failed to load resource: the server responded with a status of 404 ()

Please, any assistance would be much appreciated.

You can also see the fiddle with the same code.

JSFiddle Link: https://jsfiddle.net/Jakwakwa/LagLxpq7/6/

// Retrieve comments via Web Service
// -----------------------------------
$(function () {

  var $comments = $('#comments-ajax');

  // GET INFO FROM DATA FILE
  $.ajax({
    type: 'GET',
    url: 'https://e325wwg595.execute-api.eu-west-1.amazonaws.com/prod/comment?blogId=[blogId]',
    // url: 'https://e325wwg595.execute-api.eu-west-1.amazonaws.com/prod/comment',
    // url: '/data/comments.json',
    success: function(comments) {
      $.each(comments, function(i, comment) {
        $comments.append('<div class="comments-block"><span class="comment-author">James Dean </span><span class="comment-date">27 April 2017 </span><span class="comment-wrote">- wrote</span><p>' + comment.comment_text + '</p></div>');
      });
    },
    error: function() {
      alert('error loading data from web service');
    }

  }); // end .ajax get DATA

  // ----------------

  $('#post-comment').on('click', function() {

    var comment_input = document.getElementById("comment-input").value;

    var JSONObject = { "blogId" : 234, "comment_text": comment_input };

    $.ajax({
      type: 'POST',
      url: 'https://e325wwg595.execute-api.eu-west-1.amazonaws.com/prod/comment/',
      // url: '/data/comments.json',
      data: JSON.stringify(JSONObject),
      // data: JSONObject,
      dataType: 'json',
      success: function(newComment) {

        $comments.append('<div class="comments-block"><span class="comment-author">James Dean </span><span class="comment-date">27 April 2017 </span><span class="comment-wrote">- wrote</span><p>' + newComment.comment_text + '</p></div>');
      },
      error: function(newComment) {

        alert('error saving order');
      }
    });
  });

});
.comments-expanded-container {
	background-color: #efefef;
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

.comment-input-field {
	width: 90%;
	height: 180px;
	border: none;
	border-bottom: 2px solid #bababa;
}

.comments-btn {
	background-color: #86bdbb;
	border: none;
	color: #fff;
	font-size: 24px;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	float: right;
  margin-right: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-11 offset-md-1">
  <hr>
  <div class="comments-expanded-container toggle-container clearfix">

    <div id="comments-ajax">

    </div>

    <div>
      <input type="text" id="comment-input" class="comment-input-field" name="comments">
      <button id="post-comment" class="comments-btn">Comment</button>
    </div>
  </div>
</div>
1
A 404 error means "resource not found". It means that your URL does not correspond with something the server recognizes.Pointy
I would suggest removing your server's url and replace it with a random string - unless you want strangers poking your server all day. As stated above double check you have the correct url. or one that at least doesn't return a 404. You can try showing some of your backend code (routes) as well with us if you need more help.Andrew Lohr

1 Answers

1
votes

You must pass a valid id for the "blogId" parameter.

Another detail is that this request probably needs an authentication token