如何使用jquery获取数据 [英] How to fetch data using jquery
本文介绍了如何使用jquery获取数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，
我是jquery的新手，mvc正在使用以下html文件，有jquery来调用
调用MVC 4 web API.Web API函数被完美调用，但我不知道如何在html页面中显示它。请帮我看看如何在html页面中显示它。
< ！DOCTYPE html >
< html >
< head >
< script < span class =code-attribute> src = http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js >
< / script >
< script >
$（document）.ready（function（）{
$（button）。click（function（）{
$ .ajax（{
类型：'GET'，
dataType：'json'，
cache：false，
contentType：'application / json; charset = utf-8'，
async：false，
data：'{}'，
url：'api / TestApi / GetProfiles'，
成功：功能（数据）{
alert（data）;
$（＃tbDetails）。append（< tr > < td > + data.d [0] .userName +< / td > < td > + data.d [0] .userRole +< / td > < / tr > ）;
for（var i = 0; i < data.d.length; i ++） {
< span class =code-attribute> alert（'hia'）;
< span class =code-attribute>
< span class =code-attribute> < span class =code-attribute> $（＃tbDetails）。append（< tr > < td > + data.d [i] .userName +< / td > < td > + data.d [i] .userRole +< / td > < / tr > ）;
}
}，
错误：函数（错误）{
alert（err.message）;
}
}）;
}）;
}）;
< / script >
< / head >
< body > ;
< p > 这是一个段落。< / p >
< 按钮 > 在向上滑动和向下滑动p元素之间切换< /按钮 >
< table id = tbDetails cellpadding = 0 cellspacing = 0 >
< thead style = 背景色：＃DC5807;白颜色; font-weight：bold >
< tr style = border：solid 1px＃000000 >
< td > userName < / td >
< td > userRole < / td >
< / tr >
<跨度cl ass =code-keyword>< / thead >
< tbody >
< / tbody >
< / table >
< / body >
< / html > ;
Web API代码
public class TestApiController：ApiController
{
公共 UserDetails [] GetProfiles（） // [FromBody] Dictionary< string，> [] reqData）
{
DataTable dtuser = new DataTable（）;
List< userdetails> details = new List< userdetails>（）;
try
{
SqlConnection conn = new 的SqlConnection（）;
conn.ConnectionString = 数据源= 175.41.138.226,3784;用户ID = CEVA_GIPS;密码= D3fQMK3sJf23H ;;
conn.Open（）;
SqlCommand cmd = new SqlCommand（）;
cmd.CommandText = SELECT前10名userName，userRole FROM LIVE_BILLINGRATING..Users;
cmd.Connection = conn;
SqlDataAdapter da = new SqlDataAdapter（cmd）;
da.Fill（dtuser）;
foreach （DataRow dtrow in dtuser.Rows）
{
UserDetails user = new UserDetails（）;
user.UserId = dtrow [ userName]。ToString（）;
user.UserName = dtrow [ userRole]。ToString（）;
details.Add（user）;
}
}
catch （例外情况）
{
// return dt;
}
return details.ToArray（）;
// return dt;
}
public class UserDetails
{
public string UserId { get ; set ; }
public string UserName { get ; set ; }
}
}
解决方案
（document）.ready（function（）{
（button）。click（function（）{
.ajax（{
type：'GET' ，
dataType：'json'，
cache：false，
contentType：'application / json; charset = utf-8'，
async：false，
data ：'{}'，
url：'api / TestApi / GetProfiles'，
成功：函数（数据）{
alert（data）;
Hi There,
I am new in jquery and mvc am using following html file having jquery to call
call MVC 4 web API.Web API function get called perfectly but I don't know how to show it in html page. Please help me how to show it in html page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.ajax({
type: 'GET',
dataType: 'json',
cache: false,
contentType: 'application/json; charset=utf-8',
async: false,
data: '{}',
url: ' api/TestApi/GetProfiles',
success: function (data) {
alert(data);
$("#tbDetails").append("<tr><td>" + data.d[0].userName + "</td><td>" + data.d[0].userRole + "</td></tr>");
for (var i = 0; i < data.d.length; i++) {
alert('hia');
$("#tbDetails").append("<tr><td>" + data.d[i].userName + "</td><td>" + data.d[i].userRole + "</td></tr>");
}
},
error: function (err) {
alert(err.message);
}
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<table id="tbDetails" cellpadding="0" cellspacing="0">
<thead style="background-color:#DC5807; color:White; font-weight:bold">
<tr style="border:solid 1px #000000">
<td>userName</td>
<td>userRole</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
Web API Code
public class TestApiController : ApiController
{
public UserDetails[] GetProfiles()//[FromBody]Dictionary<string,>[] reqData)
{
DataTable dtuser = new DataTable();
List<userdetails> details = new List<userdetails>();
try
{
SqlConnection conn = new SqlConnection();
conn.ConnectionString = "Data Source=175.41.138.226 , 3784;User ID=CEVA_GIPS;Password=D3fQMK3sJf23H;";
conn.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "SELECT top 10 userName, userRole FROM LIVE_BILLINGRATING..Users ";
cmd.Connection = conn;
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dtuser);
foreach (DataRow dtrow in dtuser.Rows)
{
UserDetails user = new UserDetails();
user.UserId = dtrow["userName"].ToString();
user.UserName = dtrow["userRole"].ToString();
details.Add(user);
}
}
catch (Exception ex)
{
//return dt;
}
return details.ToArray();
//return dt;
}
public class UserDetails
{
public string UserId { get; set; }
public string UserName { get; set; }
}
} 解决方案
(document).ready(function () {
("button").click(function () {
.ajax({ type: 'GET', dataType: 'json', cache: false, contentType: 'application/json; charset=utf-8', async: false, data: '{}', url: ' api/TestApi/GetProfiles', success: function (data) { alert(data);
这篇关于如何使用jquery获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
