Question posted in
You can find the official documentation here.

Can't display the data using ajax GET because have error in url – Jquery ajax

I try to pass Id to Quizz page and use ajax to get the data when page is load. But, it don’t work and give me error.

HTTP404: NOT FOUND – The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET – http://localhost:54086/Home/Quizz/Home/GetData/1

I don’t know why the url look like that. Why it need to put Home/GetData/ in that url

Index.cshtml

 <div class="question bg-white p-3 border-bottom" id="start">
       <a target="_blank" rel="nofollow" href="@value.url">@Html.DisplayFor(model => value.title) &rarr;</a><br /><br />   
       <button class="btn" type="button">@Html.ActionLink("Begin the Quiz!", "Quizz", "Home", new { id = value.id }, new { style = "text-decoration:none;color:white;font-size:14px;" })</button>           
 </div>

Home Controller

  public ActionResult Quizz(int id)
        {
             Learning learn = new Learning();
            learn.id = id;

             return View(learn);
        }

   [HttpGet]
        public JsonResult GetData(int? id)
        {
            string user = Session["UserName"].ToString();
            bool isValid = db.ScoreQs.Any(x => x.username == user && x.IdMaterial == id && x.status != null);

            if (isValid)
            {

                return Json(1, JsonRequestBehavior.AllowGet);
            }
            else
            {
                var quizz = db.Quizs.Where(x => x.Learning.id == id).Select(a => new
                {
                    a.Learning.id,
                    a.quizId,
                    a.img,
                    a.question,
                    a.questionA,
                    a.questionB,
                    a.questionC,
                    a.questionD,
                    a.answer,
                });



                return Json(quizz , JsonRequestBehavior.AllowGet);
            }

        }

.js

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "Home/GetData/" + object.id,
        dataType: "json",
        data: {},
        success: function (data) {

            if (data == 1) {
               
                message.style.display = "display";
                quiz.style.display = "none";

            }
            else {
                start.style.display = "none";
                getQuestion(data, id);
                quiz.style.display = "block";
            }

        },
        error: function () {
            console.log("error");
        }
    });

   
});

Quizz.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model ProjectOE.Learning
@{
    ViewData["Title"] = "Dashboard";
}
<script>
var object = @(Html.Raw(Json.Encode(Model)));
</script>

<link rel="stylesheet" href="~/Content/style2.css">
<!-- Begin Page Content -->
<br /><br />
      <div class="container-fluid">

           <div class="b">
              <div class="card shadow mb-4">
                  <div class="card-header py-3">
                      <h6 class="m-0 font-weight-bold text-primary"> </h6>
                  </div> <div class="border">

                      <!--Quiz Container-->
                      <div id="quiz" style="display: none" class="question bg-white p-3 border-bottom">

                          <div class="d-flex flex-row align-items-center question-title justify-content-between align-items-center mcq">
                              <h5 class="text-danger mt-1 ml-2 " id="quizQuestion"></h5><br />
                          </div>


                          <div id="choices" class="choice ">
                              <button class="btn btn-block" type="button" id="choiceA" onclick="check(@Model.id,'A')"></button>
                              <button class="btn btn-block" type="button" id="choiceB" onclick="check(@Model.id,'B')"></button>
                              <button class="btn btn-block" type="button" id="choiceC" onclick="check(@Model.id,'C')"></button>
                              <button class="btn btn-block" type="button" id="choiceD" onclick="check(@Model.id,'D')"></button>
                          </div>

                          <div id="choiceResponse" style="display: none"></div>

                      </div>               
                  </div>
              </div>
          </div>
          <script src="~/js/quizgame.js"></script>
          <!--   End of Main Content-->
Tags:

2

Answers


  1. 0

    You are probably requesting from this page : http://localhost:54086/Home/Quizz
    and you append this "/Home/GetData/1".

    Try adding a global variable that you can reuse:

    Example:

    var baseUrl = "http://localhost:54086/";
$.ajax({
            type: "GET",
            url: baseUrl + "Home/GetData/" + object.id, 
.. }
    Login or Signup to reply.
  2. 0

    Just add ‘/’ at the beginning of your url. It will take path with baseURL otherwise it will take relative path.

    url: "/Home/GetData/" + object.id,
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search