如何使用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 > 小号pan>
< 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屋!
查看全文