Jquery采用ajax调取WebService显示表格

来源：互联网发布：信捷plc编程梯形图实例编辑：程序博客网时间：2024/05/08 16:33

Jquery实例中关于Ajax调取数据多集中在页面获取，关于WebService调取介绍很少，这里贴出代码，也是举例性质，后台根据自己情况进行更详细的查询返回。

这里要说明几点：

1、WebService地址必须是全称;

2、数据返回(dataType)为xml，如果要返回Json，代码需要调整;

3、参数写法看实例；

页面部分代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="a.aspx.cs" Inherits="a" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<tr>

</tr>

</table>

<p>

$(document).ready(function(){

$("#btn").click(function(){

GetWebService("/myAddress/aa.asmx/GetExample",

{title:"测试",content :"K！又是明天"},

"#example",["Title","Content"]);

});

})

function GetWebService(myUrl,dataPrams,tableId,arrFiledId){

$.ajax({

url:myUrl,

data: dataPrams,

dataType: "xml",

type: "POST",

cache: false,

success: function(xml){

AddTd(xml,tableId,arrFiledId);

error:function(xml,status){

alert(status);

}

});

}

function AddTd(xml,tableId,arrFiledId){

var tb=$(tableId);

//清空表,保留第一行

tb.find("tr").each(function(i){

if (i>0) $(this).remove();

});

//填充数据

$(xml).find("Table1").each(function(){

var tr=$("<tr></tr>");

for (var j=0;j<arrFiledId.length;j++)

$("<td></td>").html($(this).find(arrFiledId[j]).text()).appendTo(tr);

tr.appendTo(tb);

})

}

</script>

</form>

</body>

</html>

asmx代码：

[WebMethod]

public DataSet GetExample(String title, String content)

{

DataSet ds = new DataSet();

DataTable dt = new DataTable();

dt.Columns.Add("Title", Type.GetType("System.String"));

dt.Columns.Add("Content", Type.GetType("System.String"));

DataRow dr = dt.NewRow();

dr["Title"] = "甲方";

dr["Content"] = "好了没？";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Title"] = "乙方";

dr["Content"] = "明天！"+DateTime.Now.ToString("yyyy-M-d H:m:s");

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Title"] = title;

dr["Content"] = content;

dt.Rows.Add(dr);

ds.Tables.Add(dt);

return ds;

}