How to call GET Api with input param use JQuery and JavaScript in Asp.net view when a special tag lo-CodePudding

Hi I want to load count of orders in my view (in a special tag), I wrote a SP in Sql which return count of order according to input type. I design several box in my form to show all types order count. So I give "Id" to my tag and I want when form loads, this tag show the number. I wrote a script at the bottom of my view. View and script and controller :

     <div >
            <h3 id="Orders1"><sup style="font-size: 20px"></sup></h3>
            <p>New Orders </p>
     </div>

<script>
    $("#Orders1").load(
    function () {
        $.ajax({
            url: '/Report/GetResultTestData',
            data: JSON.stringify({
                id: 1 /// input value 
            }),
            type: 'GET',
            contentType: 'application/json; charset=utf-8'
        }); 
   </script>

And My controller is like bellow :

    [HttpGet]
    public IActionResult GetResultTestData(int id )
    {
        var data = _sv.GetResultTestData(id);

        return new JsonResult(data);
    }

but unfortunately it doesn't show anything would you please guide me!

CodePudding user response：

Update

  <div >
            <h3 id="Orders1"><sup style="font-size: 20px"></sup></h3>
            <p>New Orders </p>
            <span id="result2"></span>//add the id to put the result id
     </div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

      $(document).ready(function () {                  
        $.ajax({
            url: '/Report/GetResultTestData',
            data: {id: 1},
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                    $('#result2').html(result);
                }// add the success to pass the result
        });
      });
   </script>

Controller:

    [HttpGet]
    public IActionResult GetResultTestData(int id )
    {
        return Content(id, "text/plain");
    }

Result: