Answered by:
Need help write jQuery request Web API Data

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> ???</td></tr> <tr><td>Person Name:</td><td> ???</td></tr> <tr><td>Amout To Pay:</td><td> ???</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 LOADYou 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
- 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,
- 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> " + 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,
- 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
Wednesday, September 9, 2020 8:10 AM -
User1686398519 posted
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> " + value + "</td></tr>"); }); }
Best Regards,
YihuiSun
Thursday, September 10, 2020 1:54 AM - How jQuery request Query String parameter?|How jQuery pass the value to Web API?
-
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,
-
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= " + 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 LOADYou 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
- 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: <div id="PaymentId"></div><br> Receiver: <div id="PaymentReceiver"></div><br> Person Name: <div id="PersonNme"></div><br> Amout: <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