Ajax调用webService(一) 不跨域。

注:需要的js文件与组件(jquery-1.4.2.min.js和Newtonsoft.Json)

同域:要调用的webservice与ajax请求页面在同一个网站下(本文中都是本地测试)。

数据库(表名 CarUsing  cuid 主键自增列 int , carUsing varchar(100) 车辆用途)

一、创建webService。

在框架4.0中找不到Asp.Net Web服务应用程序。将框架更改为4.0以下即可找到。也创建一个网站在网站中添加webService。

 

建立的web服务应用程序的结构如下。

CarUsing.cs中代码如下:

using System;
using System.Collections.Generic;
using System.Text;

    public class CarUsing
    {
        public CarUsing() { }

        public CarUsing(string careUsing)
        {
            this.careUsing = careUsing;
        }

        public CarUsing(int cuid, string careUsing)
        {
            this.cuid = cuid;
            this.careUsing = careUsing;
        }

        private int cuid;

        public int Cuid
        {
            get { return cuid; }
            set { cuid = value; }
        }

        private string careUsing;

        public string CareUsing
        {
            get { return careUsing; }
            set { careUsing = value; }
        }
    }
View Code

Service1.asmx中的代码如下:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using Newtonsoft.Json;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;

namespace WebService2
{
    /// <summary>
    /// Service1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempri/url")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class Service1 : System.Web.Services.WebService
    {
        [WebMethod(Description = "添加")]
        public string AddCarUsing(string cusing)
        {
            string result = "";
            string sql = string.Format("insert into CarUsing values(@carUsing)");
            SqlParameter para = new SqlParameter("@carUsing", cusing);
            result = SqlHelper.ExecuteNonQuery(sql, CommandType.Text, para).ToString();
            return result;
        }

        [WebMethod(Description = "修改")]
        public string UpdateCarUsing(int id,string cusing)
        {
            string result = "";
            string sql = string.Format("update CarUsing set carUsing =@carUsing where cuid=@cuid");
            SqlParameter[] paras = {
                                        new SqlParameter("@carUsing",cusing),
                                        new SqlParameter("@cuid", id)
                                   };
            result = SqlHelper.ExecuteNonQuery(sql, CommandType.Text, paras).ToString();
            return result;
        }

        [WebMethod(Description = "删除")]
        public string delCarUsing(string cuid)
        {
            string result = "";
            string sql = string.Format("delete from CarUsing where cuid=@cuid");
            SqlParameter para = new SqlParameter("@cuid", Convert.ToInt32(cuid));
            result = SqlHelper.ExecuteNonQuery(sql, CommandType.Text, para).ToString();
            return result;
        }

        [WebMethod(Description = "根据id查询数据")]
        public string getCarUsingBycuid(string cuid)
        {
            string json = "";
            CarUsing caru = new CarUsing();
            string sql = "select * from CarUsing where cuid =@cuid";
            SqlParameter para = new SqlParameter("@cuid", Convert.ToInt32(cuid));
            using (SqlDataReader dr = SqlHelper.ExecuteReader(sql, CommandType.Text, para))
            {
                while (dr.Read())
                {
                    caru = new CarUsing(
                         Convert.ToInt32(dr["cuid"]),
                         dr["carUsing"].ToString()
                        );
                }
                json = JsonConvert.SerializeObject(caru);
            }
            return json;
        }

        [WebMethod(Description = "查询所有数据")]
        public string getCarUsing()
        {
            string json = "";
            List<CarUsing> CarUsings = new List<CarUsing>();
            string sql = "select * from CarUsing order by cuid desc";
            using (SqlDataReader dr = SqlHelper.ExecuteReader(sql, CommandType.Text))
            {
                while (dr.Read())
                {
                    CarUsing carUsing = new CarUsing(
                         Convert.ToInt32(dr["cuid"]),
                         dr["carUsing"].ToString()
                        );
                    CarUsings.Add(carUsing);
                }
                json = JsonConvert.SerializeObject(CarUsings);
            }
            return json;
        }
    }
}
View Code

注:在web.config中的<system.web>中添加

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

  

二、建立web网站

添加Newtonsoft.Json.dll组件,且添加js文件

在网站根目录下新建一个html页面HTMLPage1.htm。

代码如下:

<html>
<head runat="server">
    <title>车用途Ajax+Json</title>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var WebServiceURL = "http://localhost:22657/";
        //js版本必须2.0以下,2.0以上不ie8不支持get等方法。
        function showAll() {
            //返回Dafault页面的数据。

            $.ajax({
                type: "POST",   //访问WebService使用Post方式请求
                contentType: "application/json", //WebService 会返回Json类型
                url: WebServiceURL + "Service1.asmx/getCarUsing", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
                data: "{}",         //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到       
                dataType: 'json',
                success: function (json) {
                    //回调函数,result,返回值
                    var jsons = eval('(' + json.d + ')');
                    var html = "<table border=1 bordercolor=6d6d6d cellspacing = 1>";
                    html += "<tr backgroundcolor='yellow'><td>Id</td><td>用途</td><td>操作</td></tr>";
                    for (var i = 0; i < jsons.length; i++) {
                        html += "<tr>";
                        html += "<td>" + jsons[i].Cuid + "</td><td>" + jsons[i].CareUsing + "</td><td><a href='javascript:;' onclick='UpdateInit(" + jsons[i].Cuid + ")'>修改</a> <a href='javascript:;' onclick='if(confirm(\"确定删除嘛?\")){Delete(" + jsons[i].Cuid + ");}'>删除</a></td>";
                        html += "</tr>";
                    }
                    html += "</table>"
                    $("#div1").html(html);
                }
            });
        }
        //准备添加
function Insert() { $("#d1").show(); $("#d2").show(300); } function InsertInfo() { var json = '{"cusing":"' + form1.txtcarUsing.value + '"}'; $.ajax({ type: "POST", contentType: "application/json", url: WebServiceURL + "Service1.asmx/AddCarUsing", data: json, dataType: 'json', success: function (result) { showAll(); CloseDiv(); }, error: function (result) { alert("操作失败"); } }); } function Delete(id) { var json = '{"cuid":"'+id+'"}'; $.ajax({ url: WebServiceURL + "Service1.asmx/delCarUsing", contentType: "application/json;charset=utf-8", type: "POST", dataType: "json", data: json, success: function (json) { showAll(); }, error: function (json) { alert("操作失败!"); } }); } //修改初始化 function UpdateInit(cuid) { var json = '{"cuid":"' + cuid + '"}'; Insert(); //弹出修改框。 $.ajax({ type: "POST", contentType: "application/json", url: WebServiceURL + "Service1.asmx/getCarUsingBycuid", data: json, dataType: 'json', success: function (result) { var json = eval('[' + result.d + ']'); form1.txtcarUsing.value = json[0].CareUsing; form1.txtid.value = json[0].Cuid; cuid = json[0].Cuid; }, error: function (json) { alert("获取数据失败!"); } }); } //发送修改 function UpdateSend(id) { var json = '{"id":' + form1.txtid.value + ',"cusing":"' + form1.txtcarUsing.value + '"}'; $.ajax({ url: WebServiceURL + "Service1.asmx/UpdateCarUsing", contentType: "application/json;charset=utf-8", type: "POST", dataType: "json", data:json, success: function (json) { showAll(); CloseDiv(); }, error: function (msg) { alert("操作失败!"); } }); } function CloseDiv() { $('#d1').hide(500); $('#d2').hide(500); } </script> </head> <body onload="showAll()"> <form id="form1" runat="server"> <input type="button" value="添加车源用途" onclick="Insert()" /> <div id="div1"> </div> <div id="d1" style="width: 100%; display: none; height: 100%; position: absolute; left: 0px; top: 0px; filter: alpha(opacity=70);"> </div> <div id="d2" style="width: 100%; display: none; height: 100%; position: absolute; left: 0px; top: 0px;"> <table width="100%" height="100%"> <tr> <td valign="middle" align="center"> <div style="width: 300px; height: 200px; background-color: White; border: 3px red solid;"> <input type="button" value="隐藏" onclick="CloseDiv()" /> <input type="hidden" id="txtid" /> 用途:<input type="text" id="txtcarUsing" /> <input type="button" value="添加" onclick="InsertInfo()" /> <input type="button" value="修改" onclick="UpdateSend()" /> </div> </td> </tr> </table> </div> </form> </body> </html>

  

 运行界面如下:

posted @ 2013-10-31 17:36  时光未曾老去.  阅读(403)  评论(0编辑  收藏  举报