ajax+webservice解决方案

浏览数：31 / 时间：2015年06月09日

webconfig配置

在<system.web>节点下添加

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",  ... 

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ajax+webservice解决方案