Need help write jQuery request Web API Data

Reply

bonusnet

Member

223 Points

300 Posts

Need help write jQuery request Web API Data

Sep 08, 2020 10:46 PM|bonusnet|LINK

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

Reply

YihuiSun

Participant

1400 Points

451 Posts

Re: Need help write jQuery request Web API Data

Sep 09, 2020 08:00 AM|YihuiSun|LINK

Hi bonusnet,

I haven't reproduced your problem, can you provide the relevant code for your request api?
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

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 09, 2020 08:10 AM|bonusnet|LINK

Hi Yishun,

I need help as following,

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

Please help

Reply

YihuiSun

Participant

1400 Points

451 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 01:54 AM|YihuiSun|LINK

Hi bonusnet,

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 }
```
How jQuery store the Query String value?
- Do you mean you want to store the parameter id?Where do you want to store it?

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

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 01:56 AM|bonusnet|LINK

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

Reply

YihuiSun

Participant

1400 Points

451 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 02:03 AM|YihuiSun|LINK

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

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 02:28 AM|bonusnet|LINK

YihuiSun

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

Reply

YihuiSun

Participant

1400 Points

451 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 05:42 AM|YihuiSun|LINK

Hi bonusnet,

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

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

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 06:13 AM|bonusnet|LINK

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

Reply

YihuiSun

Participant

1400 Points

451 Posts

Re: Need help write jQuery request Web API Data

Sep 10, 2020 08:47 AM|YihuiSun|LINK

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:

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

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 11, 2020 04:42 AM|bonusnet|LINK

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

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 13, 2020 07:56 AM|bonusnet|LINK

Please help

Reply

bruce (sqlwo...

All-Star

56824 Points

14988 Posts

Re: Need help write jQuery request Web API Data

Sep 13, 2020 07:33 PM|bruce (sqlwork.com)|LINK

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.

bruce (sqlwork.com)

Reply

bonusnet

Member

223 Points

300 Posts

Re: Need help write jQuery request Web API Data

Sep 14, 2020 06:57 AM|bonusnet|LINK

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

Need help write jQuery request Web API Data[Answered] RSS

13 replies

Shortcuts

Related Links

Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

YihuiSun

Re: Need help write jQuery request Web API Data

bonusnet

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

bonusnet

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data

Re: Need help write jQuery request Web API Data