通过webservice使用jquery访问数据（包含显示，验证，修改）

来源：互联网发布：什么是黑箱人工智能编辑：程序博客网时间：2024/05/20 05:45

webservice的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;

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

    public WS () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [WebMethod(Description = "获得jobs表的数据，返回泛型集合")]
    public List<Clsjob> getAllJjobs()
    {
        List<Clsjob> jobs = new List<Clsjob>();
        SqlConnection myCnn = new SqlConnection("server=.\\sqlexpress;uid=sa;pwd=123456;database=pubs;");
        SqlCommand myCmd=new SqlCommand("select * from jobs",myCnn);
        //try
        myCnn.Open();
        SqlDataReader DR = myCmd.ExecuteReader();
        while (DR.Read())
        {
            Clsjob job = new Clsjob();
            job.Job_id = Convert.ToInt32( DR["job_id"] );
            job.Job_desc = DR["job_desc"].ToString();
            job.Min_lvl = Convert.ToInt32(DR["min_lvl"]);
            job.Max_lvl = Convert.ToInt32(DR["max_lvl"]);
            jobs.Add(job);
        }
        myCnn.Close();
        return jobs;
    }

    [WebMethod(Description = "修改表数据")]
    public void UpdateTable(int jid,string desc,int minlvl,int maxlvl)
    {
        SqlConnection myCnn = new SqlConnection("server=.\\sqlexpress;uid=sa;pwd=123456;database=pubs;");
        string strCmd=string.Format("update jobs set job_desc='{0}',min_lvl={1},max_lvl={2} where job_id={3}",
            desc,minlvl,maxlvl,jid);
        SqlCommand myCmd = new SqlCommand(strCmd, myCnn);
        //try
        myCnn.Open();
        myCmd.ExecuteNonQuery();
        myCnn.Close();

    }
}

实体类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
///Clsjob 的摘要说明
/// </summary>
public class Clsjob
{
    private int job_id;

    public int Job_id
    {
        get { return job_id; }
        set { job_id = value; }
    }
    private string job_desc;

    public string Job_desc
    {
        get { return job_desc; }
        set { job_desc = value; }
    }
    private int min_lvl;

    public int Min_lvl
    {
        get { return min_lvl; }
        set { min_lvl = value; }
    }
    private int max_lvl;

    public int Max_lvl
    {
        get { return max_lvl; }
        set { max_lvl = value; }
    }

   public Clsjob()
   {

   }
    public Clsjob(int i)
    {
        job_id = i;
    }
}
html：

<!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">
<head>
    <title></title>
    <style type="text/css">
        tr.double
        {
            background-color: #fcdad5;
        }
        tr.over
        {
            background-color: #c9b5d4;
        }
    </style>

    <script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            var str = "";   //获得表查询结果的所有数据
            var sid = "";   //获得当前选中行的job_id的值
            $("#btn0").click(function() {
                $("#img1").ajaxStart(function() { $(this).show(2000); });
                $("#img1").ajaxStop(function() { $(this).hide(1000); });
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "WS.asmx/getAllJjobs",
                    data: "{}",
                    dataType: 'json',
                    success: function(res) {
                        var th = "<tr><th>ID</th><th>DESC</th><th>MIN</th><th>MAX</th></tr>";
                        $("#h1").html(th);
                        $(res.d).each(function() {
                            str += "<tr><td>" + this["Job_id"] + "</td><td>" + this["Job_desc"]
                             + "</td><td>" + this["Min_lvl"] + "</td><td>" + this["Max_lvl"] + "</td></tr>";

                        });
                        $("#b1").html(str);
                        $("#b1 tr:odd").addClass("double");
                        $("#b1 tr").mouseover(function() { $(this).addClass("over"); });
                        $("#b1 tr").mouseout(function() { $(this).removeClass("over"); });

                        $("#b1 tr").click(function() {
                            $("#edit").show(1000);
                            $("#i1").html($(this).find("td:eq(0)").text());
                            $("#d1").val($(this).find("td:eq(1)").text());
                            $("#m1").val($(this).find("td:eq(2)").text());
                            $("#m2").val($(this).find("td:eq(3)").text());

                            //调整位置
                            var myoffset = $(this).offset();
                            var l = 320; //??

                            $("#edit").css("position", "absolute").css("left", l).css("top", myoffset.top);
                        });

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

                            sid = $("#i1").html();
                            var d = $("#d1").val();
                            var min = $("#m1").val();
                            var max = $("#m2").val();
                            var strid = "{jid:" + sid + ",desc:'" + d + "',minlvl:" + min + ",maxlvl:" + max + "}";
                            alert(strid);
                            $.ajax({ type: "POST",
                                contentType: "application/json",
                                url: "WS.asmx/UpdateTable",
                                data: strid,
                                dataType: 'json',
                                success: function(res) {
                                    // 验证,自行完成max的验证，desc的验证，注意 min必须小于max
                                    var i = $("#i1").html();
                                    i = eval(i + "-1");

                                    var min1 = $("#m1").val();
                                    var r1 = /[^\d1]/;   //正则表达式

                                    if (min1.length == 0) {
                                        alert("不能为空！");
                                        return;
                                    }
                                    if (r1.test(min1)) {
                                        alert("必须是数字！");
                                        return;
                                    }
                                    else if (min1.length < 2) {
                                        alert("不能小于10");
                                    }

                                    else { //刷新当前html页面
                                        $("#b1").find("tr:eq(" + i + ")").find("td:eq(1)").text($("#d1").val());
                                        $("#b1").find("tr:eq(" + i + ")").find("td:eq(2)").text($("#m1").val());
                                        $("#b1").find("tr:eq(" + i + ")").find("td:eq(3)").text($("#m2").val());
                                        $("#edit").hide(1000);
                                    }

                                }

                            });

                        });

                        $("#btn2").click(function() {
                            $("#edit").hide(1000);
                        });

                        //自行完成删除的操作
                        $("#btn3").click(function() {
                            if (confirm("确定删除吗？")) {
                                //自行添加Ajax
                                sid = $("#i1").html();
                                alert(sid);
                                $("#b1 tr td:first-child").filter(function() { ; return $(this).text() == sid; }).parent().remove();
                                $("#edit").hide(1000);
                            }
                            else {
                                return;
                            }
                        });
                    }
                });
            });

        });
    </script>

</head>
<body>
    <input type="button" value="显示数据" id="btn0" />
    <img id="img1" src="blueLoad.gif" alt="" style="display: none;" />
    <div id="result">
    </div>
    <table id="datas" border="1">
        <thead id="h1">
        </thead>
        <tbody id="b1">
        </tbody>
    </table>
    
    <div id="edit" style="display: none; background-color: #6699ed; width: 200px;">
        id:<div id="i1" style="display: inline;">
        </div>
        <br />
        desc:<input type="text" id="d1" /><br />
        min:<input type="text" id="m1" />
        <br />
        max:<input type="text" id="m2" />
        <input type="button" id="btn1" value="修改" />
        <input type="button" id="btn2" value="取消修改" />
        <input type="button" id="btn3" value="删除" />
    </div>
</body>
</html>

资源连接地址：

待上传。。。