locked
Need help write jQuery request Web API Data RRS feed

  • Question

  • User-557095619 posted

    I'm jQuery Newbies. I've Web API URL & Data as following,


    Web API need (1) Query String Parameter named - id. Let's say, id=2018637836008. My html as below,

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Request API</title>
    </head>
    <body>
    
        <table>
            <tr><td>Payment Receiver:</td><td>&nbsp;???</td></tr>
            <tr><td>Person Name:</td><td>&nbsp;???</td></tr>
            <tr><td>Amout To Pay:</td><td>&nbsp;???</td></tr>
        </table>
    </body>
    </html>

    How to replace ???, ???, ??? with appropriate value based Web API Parameter?

    Please help

    Tuesday, September 8, 2020 10:46 PM

Answers

  • User1686398519 posted

    Hi bonusnet, 

    bonusnet

    how jQuery assign in PAGE LOAD

    You can put the js code in $( document ).ready(function() {}); so that the code contained in it will run as soon as the entire page is loaded.

    Note:

    1. I set a breakpoint in the browser (open with F12) to show you how to add data to the page (use F10 to execute step by step). You can view the animation below to better help you understand.
    2. If you want to use jquery better, first you need to have some understanding of javascript. You can click here to learn about learning javascript.You can click here to learn more about using jquery.
    @{ Layout = null;}
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <div id="result"></div>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/api/payment/GetPaymentById",
                data: { id: "2018637836007" },
                success: function (data) {
                    $("#result").empty();
                    if (data != null) {
                        $.each(data, function (key, value) {
                            var label = "<label for=" + key + ">" + value + "</label> ";
                            $("#result").append(label);
                        });
                    }
                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        });
    </script>

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 10, 2020 8:47 AM

All replies

  • User1686398519 posted

    Hi bonusnet,

    1. I haven't reproduced your problem, can you provide the relevant code for your request api? 
    2. I wrote an example, you can refer to it.

    Model

        public class PaymentModel
        {
            public long PaymentId{ get; set; }
            public string PaymentReceiver{ get; set; }
            public string PersonNme { get; set; }
            public int UniqueId { get; set; }
            public decimal Amt { get; set; }
        }

    Controller

            public PaymentModel GetPaymentById(long id)
            {
                PaymentModel test = new PaymentModel
                {
                    PaymentId = 208637836008,
                    Amt = Decimal.Parse("260.50"),
                    PaymentReceiver = "BENDAHARI UNIVERSITI TKNOLOGI MARA",
                    PersonNme = "NURUL NASUHA BINTI ZAHARI",
                    UniqueId = 0
                };
                return test;
            }

    View

    @{ Layout=null;}
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <button id="requesttest">request</button>
    <table class="table table-bordered" id="tabeltest">
        <thead></thead>
        <tbody></tbody>
    </table>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script>
        $("#requesttest").click(function(){
            $.ajax({
                type: "GET",
                url: "/api/payment/GetPaymentById",
                data: { id: 2018637836008 },
                success: function (data) {
                    $("#tabeltest tbody").empty();
                    $.each(data, function (key, value) {
                        $("#tabeltest tbody").append("<tr><td>" + key + ":</td><td>&nbsp;" + value + "</td></tr>");
                    });
                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        });
    </script>

    Here is the result.

    Best Regards,

    YihuiSun

    Wednesday, September 9, 2020 8:00 AM
  • User-557095619 posted

    Hi Yishun, 

    I need help as following,

    1. How jQuery request Query String parameter?
    2. How jQuery store the Query String value?
    3. How jQuery pass the value to Web API?
    4. How jQuery get result and place it into html?

    Please help

    Wednesday, September 9, 2020 8:10 AM
  • User1686398519 posted

    Hi bonusnet, 

    1. How jQuery request Query String parameter?|How jQuery pass the value to Web API?
      • Use jquery ajax to make the request.
      • In the example provided earlier, id is the parameter you want to pass
      • url: "/api/payment/GetPaymentById",
        data: { id: 2018637836008 }
    2. How jQuery store the Query String value?
      • Do you mean you want to store the parameter id?Where do you want to store it?
    3. How jQuery get result and place it into html?
      • After the ajax request is successful, add the obtained data to the table named tabeltest
      • <table class="table table-bordered" id="tabeltest">
            <thead></thead>
            <tbody></tbody>
        </table>
      • success: function (data) {
           $("#tabeltest tbody").empty();
           $.each(data, function (key, value) {
               $("#tabeltest tbody").append("<tr><td>" + key + ":</td><td>&nbsp;" + value + "</td></tr>");
           });
        }

    Best Regards,

    YihuiSun

    Thursday, September 10, 2020 1:54 AM
  • User-557095619 posted

    Hi YihuiSun,

    I made new posting. Can you help me at - https://forums.asp.net/t/2170601.aspx?Need+help+on+Entity+Framework

    Please help

    Thursday, September 10, 2020 1:56 AM
  • User1686398519 posted

    Hi bonusnet, 

    Has your previous problem been solved?I suggest you could mark the answer which is helpful. This will help other people who faces the same issue to find the right answer faster.

    Best Regards,

    YihuiSun

    Thursday, September 10, 2020 2:03 AM
  • User-557095619 posted

    Hi bonusnet, 

    Has your previous problem been solved?I suggest you could mark the answer which is helpful. This will help other people who faces the same issue to find the right answer faster.

    Best Regards,

    YihuiSun

    Hi YihuiSun,

    I need help on jQuery side. The Web API always return 1 row only. Can you show me,

    How jQuery request Web API and paste the value using Label tag?

    <label for="PaymentId"></label> 
    <label for="PersonNme"></label> 
    <label for="PaymentReceiver"></label> 
    <label for="Amt"></label> 

    Please help

    Thursday, September 10, 2020 2:28 AM
  • User1686398519 posted

    Hi bonusnet, 

    1. The Web API always return 1 row only. Can you show me,

      • Do you mean that webapi only returns one piece of data?What is your question, can you make it clear?
    2. If you don't want to use the table to display the data, and you want to use the label, you can add a div as a container and use jquery to add data.
      • I added input, you can modify it according to your needs.
      • @{ Layout = null;}
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <button id="requesttest">request</button>
        <div id="result"></div>
        <script src="~/Scripts/jquery-3.4.1.min.js"></script>
        <script src="~/Scripts/bootstrap.js"></script>
        <script>
            $("#requesttest").click(function () {
                $.ajax({
                    type: "GET",
                    url: "/api/payment/GetPaymentById",
                    data: { id: "2018637836007" },
                    success: function (data) {
                        $("#result").empty();
                        if (data != null) {
                            $.each(data, function (key, value) {
                                var label = "<label for=" + key + ">" + key + "</label> ";
                                var input = "<input name=" + key + " id=" + key + " value=&nbsp;" + value + "><br>";
                                $("#result").append(label);
                                $("#result").append(input);
                            });
                        } else {
                            alert($("#searchcontent").val() + " is not exsist.");
                        }
                    },
                    failure: function (data) {
                        alert(data.responseText);
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });
            });
        </script>

    Here is the result.

    Best Regards,

    YihuiSun

    Thursday, September 10, 2020 5:42 AM
  • User-557095619 posted

    Hi YihuiSun,

    Yes. Every jQuery send parameter ( id ), it only return 1 row of data. PaymentId | PaymentReceiver | PersonNme | Amt 

    This return, how jQuery assign in PAGE LOAD. Your sample is button click. I need sample in PAGE LOAD

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Request API</title>
    </head>
    <body>
    
    Payment Id:<label id="PaymentId"></label><br>
    Receiver:<label id="PaymentReceiver"></label><br>
    Person Name:<label id="PersonNme"></label><br>
    Amout:<label id="Amt"></label><br>
    </body> </html>

    Please help

    Thursday, September 10, 2020 6:13 AM
  • User1686398519 posted

    Hi bonusnet, 

    bonusnet

    how jQuery assign in PAGE LOAD

    You can put the js code in $( document ).ready(function() {}); so that the code contained in it will run as soon as the entire page is loaded.

    Note:

    1. I set a breakpoint in the browser (open with F12) to show you how to add data to the page (use F10 to execute step by step). You can view the animation below to better help you understand.
    2. If you want to use jquery better, first you need to have some understanding of javascript. You can click here to learn about learning javascript.You can click here to learn more about using jquery.
    @{ Layout = null;}
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <div id="result"></div>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/api/payment/GetPaymentById",
                data: { id: "2018637836007" },
                success: function (data) {
                    $("#result").empty();
                    if (data != null) {
                        $.each(data, function (key, value) {
                            var label = "<label for=" + key + ">" + value + "</label> ";
                            $("#result").append(label);
                        });
                    }
                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        });
    </script>

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 10, 2020 8:47 AM
  • User-557095619 posted

    Hi YihuiSun,

    I follow your code and make it few amendment. Here the result,

    <body>
    
        Payment Id:&nbsp;<div id="PaymentId"></div><br>
        Receiver:&nbsp;<div id="PaymentReceiver"></div><br>
        Person Name:&nbsp;<div id="PersonNme"></div><br>
        Amout:&nbsp;<div id="Amount"></div><br>
    
        <script>
            var getParams = getUrlParameter('id');
    
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "/api/payment/GetPaymentById",
                    data: { id: getParams },
                    success: function (data) {
                        $("#result").empty();
                        if (data != null) {
                            $.each(data, function (key, value) {
                                
                                $("#PaymentId").text(value);
                                $("#PaymentReceiver").text(value);
                                $("#PersonNme").text(value);
                                $("#Amount").text(value);
    
                            });
                        }
                    },
                    failure: function (data) {
                        alert(data.responseText);
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });
            });
        </script>
    
    
    </body>

    Looks like, it's not paste in accurate <div> statement. Web API is fine

    Need help adjust jQuery Loop

    Friday, September 11, 2020 4:42 AM
  • User-557095619 posted

    Please help

    Sunday, September 13, 2020 7:56 AM
  • User-474980206 posted

    What did you expect? There are 4 fields. In the loop you set these files to the loop item values, or course they will be the values of the last item in the loop.

    Sunday, September 13, 2020 7:33 PM
  • User-557095619 posted

    Frankly speaking, I really don't know - How the jQuery syntax looks like. So far, I've this

      <script>
            var getParams = getUrlParameter('id');
    
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "/api/payment/GetPaymentById",
                    data: { id: getParams },
                    success: function (data) {
                        $("#result").empty();                                     
    
                        $("#PaymentId").text(val.PaymentId);
                        $("#PaymentReceiver").text(val.PaymentReceiver);
                        $("#PersonNme").text(val.PersonNme);
                        $("#Amount").text(val.Amt);
    
                    },
                    failure: function (data) {
                        alert(data.responseText);
                    },
                    error: function (data) {
                        alert(data.responseText);
                    }
                });
            });
        </script>

    Unfortunately, no value return

    Please help

    Monday, September 14, 2020 6:57 AM