ajax+webservice解决方案

webconfig配置

在<system.web>节点下添加

<webServices>
   <protocols>
    <add name="HttpSoap"/>
    <add name="HttpPost"/>
    <add name="HttpGet"/>
    <add name="Documentation"/>
   </protocols>
  </webServices>

js界面

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css">
<head runat="server">
    <title>通讯录</title>
</head>
<style type="text/css">
    .circle{
     width:100px;
    height:100px;
    border-radius:50%;
   overflow:hidden;
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  background-color  :#FFFFFF;

}
</style>
<script type="text/javascript">

    $(document).ready(pageLoad);
    // 载入时进行执行的方法
    function pageLoad() {
        BindDataSet();

    }
    function GetXXByID( ID)
    {
           $.ajax({
            type: "POST",
            async: false,
            url: "http://localhost:43070/Service1.asmx/GetXXByID",
            data: {ID:12},
            dataType: ‘xml‘, //返回的类型为XML ，和前面的Json，不一样了
            success: function(result) {
                //演示一下捕获

                try {
                    var str = "";
                    $(result).find("Table1").each(function() {

                        alert("123");
//                        $(‘ul‘).append("<li><a href=‘XX.aspx?id=" + $(this).find("ID").text() + "‘  rel=‘external‘ > <img class=‘circle‘ src=‘" + $(this).find("Img").text() + "‘ /> <h2>联系人：" + $(this).find("Name").text() + "</h2>"
//                        + "<p>联系电话：" + $(this).find("Phone").text() + "</p></a></li>");

                    });
              //      $("ul").listview("refresh")
                }
                catch (e) {
                    alert(e);
                    return;
                }
            },
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
                if (status == ‘error‘) {
                    alert(status);

                }
            }
        });
    }
    function BindDataSet() {

        $.ajax({
            type: "POST",
            async: false,
            url: "http://localhost:43070/Service1.asmx/GetDataSet",
            data: "{}",
            dataType: ‘xml‘, //返回的类型为XML ，和前面的Json，不一样了
            success: function(result) {
                //演示一下捕获

                try {
                    var str = "";
                    $(result).find("Table1").each(function() {

                        $(‘ul‘).append("<li><a  onclick=‘GetXXByID(" + $(this).find("ID").text() + ")‘  href=‘#‘  rel=‘external‘ > <img class=‘circle‘ src=‘" + $(this).find("Img").text() + "‘ /> <h2>联系人：" + $(this).find("Name").text() + "</h2>"
                        + "<p>联系电话：" + $(this).find("Phone").text() + "</p></a></li>");

                    });
                    $("ul").listview("refresh")
                }
                catch (e) {
                    alert(e);
                    return;
                }
            },
            error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数
                if (status == ‘error‘) {
                    alert(status);

                }
            }
        });

        }
    function BindCallHello() {
        $.ajax({
            type: "post", //访问WebService使用Post方式请求

            url: "http://localhost:43070/Service1.asmx/HelloWorld", //调用Url(WebService的地址和方法名称组合---WsURL/方法名)

            data: {}, //这里是要传递的参数，为Json格式{paraName:paraValue}

            contentType: "Application/Json", // 发送信息至服务器时内容编码类型

            beforeSend: function(XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的数据类型。(貌似不起作用，因为WebService的请求/返回 类型是相同的，由于请求的是Json，所以，返回的默认是Json)
            },
            success: function(data) {
                var jsonValue = data;

                //alert(jsonValue.d); // 输出Json

            },
            complete: function(XMLHttpRequest, textStatus) {
                var returnText = XMLHttpRequest.responseText;
                $("#backData").html(returnText); // 输出服务器端返回数据
            }

          });

    }

</script>
<body>
  <div data-role="page">
  <div data-role="header">
    <h1>通讯录</h1>
  </div>
  <div data-role="content" >
     <ul id="listview1" data-role="listview" data-autodividers="true" data-inset="true" data-filter="true">

  </ul>
  </div>
  <div data-role="footer" class="ui-btn" style=" position:fixed; top:90%">
      <a href="#" data-role="button">添加联系人</a>
  </div>
</div>
</div>
</body>
</html>

webservice

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

namespace WS_Server
{
    /// <summary>
    /// Service1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]  //注释必须去掉
    public class Service1 : System.Web.Services.WebService
    {

        [WebMethod(true,Description="test")]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod(true, Description = "根据id获取联系人的特定信息")]
        public DataSet GetXXByID(string ID)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", Type.GetType("System.String"));
            dt.Columns.Add("Img", Type.GetType("System.String"));
            dt.Columns.Add("Name", Type.GetType("System.String"));
            dt.Columns.Add("Phone", Type.GetType("System.String"));
            DataRow dr = dt.NewRow();
            dr["ID"] = "1";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            ds.Tables.Add(dt);
            return ds;
        }
        [WebMethod]
        public DataSet GetDataSet()
        {
            //DataSet ds = new DataSet();
            //DataTable dt = new DataTable();
            //dt.Columns.Add("ID", Type.GetType("System.String"));
            //dt.Columns.Add("Value", Type.GetType("System.String"));
            //DataRow dr = dt.NewRow();
            //dr["ID"] = "1";
            //dr["Value"] = "新年快乐";
            //dt.Rows.Add(dr);
            //dr = dt.NewRow();
            //dr["ID"] = "2";
            //dr["Value"] = "万事如意";
            //dt.Rows.Add(dr);
            //ds.Tables.Add(dt);
            //return ds;
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();

            dt.Columns.Add("ID", Type.GetType("System.String"));
            dt.Columns.Add("Img", Type.GetType("System.String"));
            dt.Columns.Add("Name", Type.GetType("System.String"));
            dt.Columns.Add("Phone", Type.GetType("System.String"));

            DataRow dr = dt.NewRow();
            dr["ID"] = "1";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["ID"] = "2";
            dr["Img"] = "img/header.jpg";
            dr["Name"] = "哈哈1";
            dr["Phone"] = "15584373215";
            dt.Rows.Add(dr);
            ds.Tables.Add(dt);
            return ds;
        }
    }
}

后来在一个不起眼的小站找到一个帖子，某个人的一个建议提醒了我。 我原来的代码是这样写的： 错误代码

复制代码 代码如下:

$.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data:" { tablename: temp }",
dataType: "XML" ...

WS是这样写的： webservice

复制代码 代码如下:

[WebMethod] public DataSet getDataFromATable(string tablename) { DataSet ds = new DataSet();
using (SqlConnection con=new SqlConnection(connectionString)) {
con.Open(); SqlCommand cmd = new SqlCommand(); cmd.Connection = con;
cmd.CommandText = string.Format("select * from {0}",tablename);
SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(ds); }
return ds; } [code]
网上搜到的，都说如果是无参数的WS，用上面的data:"{}"是没有错的，但有参的这样传会出错。 其实很简单，只需要做一点小小的修改就可以了
正确代码 [code] $.ajax({ type: "post", url: "_service.asmx/getDataFromATable", data: { tablename: temp }, dataType: "XML", ...

这是一个微不足道的小细节。 我想说的是，某些人，无论是牛人还是新手，不要盲目地转载别人的东西。
请转载一些正确的。

时间： 2024-10-20 06:12:03

ajax+webservice解决方案的相关文章

项目总结[2]_svg+ajax+webservice+pSpace sdk实现实时数据的web展示

1.使用svg实现组态画面和动态数据展示 通过js的定时器调用webservice方法获取数据后更新节点数据 /// <summary>启动定时刷新</summary> function Start() { InitSvgElement(); this.timer = setInterval("GetTagValues()", 1000); } /// <summary>启动定时刷新</summary> function Stop() {

Jquery Ajax WebService

仅供参考 ws.aspx 代码 <script type="text/javascript"> $(function () { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", //WebService 会返回Json类型 url: "WebService1.asmx/HelloWorld", //调用W

移动端压缩并ajax上传图片解决方案

1.需求 做一个前端可压缩并且上传图片到后台的功能 2.使用组件 用到的主要是jq和LocalResizeIMG这2个库 3.使用方法 a.引入脚本文件 <script type='text/javascript' src='js/jquery-2.0.3.min.js'></script> <script type='text/javascript' src='js/LocalResizeIMG.js'></script> <script type=

AJAX + WebService 实现文件上传

1. 界面HTML <p >上传文件: <input id="zfiles" type="file" name="file"/></ p> <br /> <input type="button" value="上传" onclick="test()" /> 2. JavaScript代码 function test() { va

THINKPHP3.2 中使用 soap 连接webservice 解决方案

今天使用THINKPHP3.2 框架中开发时使用soap连接webservice 一些浅见现在分享一下, 1.首先我们要在php.ini 中开启一下 php_openssl.dll php_soap.dll 2.在方法中创建的 SoapClient 类 的实例 $url="https://www.test.com/adwebservice.asmx?wsdl"; $client = new \SoapClient($url); 3.然后调用webservice 接口方法 1 //获取w

Jquery Ajax调用aspx页面实例

目前,我会的几种asp.net界面与后台代码交互方式有几种: 1.webform+服务器控件交互: 2.webform+jquery+ajax+一般处理程序交互: 3.webform+jquery+ajax+Webservice/WCF交互: 4.MVC: 5.webform+jquery+ajax直接交互: 其中第1种交互是入门级,发展级为第2与第3,交互方式类似,也是我常用的开发方式.第4种最近几年才出现,玩过,用于项目比较少. 现在记录一下第5种交互方式. 第一步:准备页面代码: <!DO

ASP.NET 使用Ajax

之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的ScriptManager. $.ajax向普通页面发送get请求 这是最简单的一种方式了,先简单了解jQuery ajax的语法,最常用的调用方式是这样:$.ajax({settings}); 有几个常用的setting,全部参数及其解释可以去jQuery官方API文档查询 1. type:请求方式

ASP.NET 使用Ajax(转)

之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的ScriptManager. $.ajax向普通页面发送get请求 这是最简单的一种方式了,先简单了解jQuery ajax的语法,最常用的调用方式是这样:$.ajax({settings}); 有几个常用的setting,全部参数及其解释可以去jQuery官方API文档查询 1. type:请求方式

jQuery提交Json数据到Webservice，并接收返回的Json数据

jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; // 这里要直接使用JOSN对象 $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: "/WebServices/ProductPropertyWebServi