ajax調用WebService實現數據庫操做

 首先說下測試環境和思路：

前端收集數據轉換成json格式傳輸到後端，處理並存入數據庫

1.數據庫操做：

[WebMethod]
        public string InsertPoint(string data)
        {
            //解決跨域問題
            //Context.Response.AddHeader("Access-Control-Allow-Origin", "*");
            string database = "Data Source=.;Initial Catalog=test;Persist Security Info=True;User ID=sa;Password=password1633";
            //string data = HttpContext.Current.Request["data"];
            try
            {

                if (data.Equals("") || data == null)
                {
                    return "data is null";
                }
                else
                {
                    OverlaysPoint opoint = JsonConvert.DeserializeObject<OverlaysPoint>(data);// 將接收的參數data實例化爲一個對象（方便操做），注意該類的變量名要和json的key值對應 /*foreach (Data_Opoint dtpoint in opoint.overlays)
                    {
                        sql = "insert into Map_Overlays(wf_pictureid,wf_picturename,wf_railid,wf_name,wf_location,wf_createtime,wf_pid,wf_lng,wf_lat) values('" + "123456789" + "','" + opoint.picturename + "','" + opoint.id + "','" + opoint.name + "','" + opoint.location + "','" + opoint.createime + "','" + dtpoint.pid + "','" + dtpoint.lng.ToString() + "','" + dtpoint.lat.ToString() + "')";
                        ExecuteUpdate(sql, database);

                    }*/
                    string[] xyArray = opoint.position.Split(new string[] { "(", ",", ")" }, StringSplitOptions.RemoveEmptyEntries); //處理json字符串
                     //執行sql語句
                    string sql = "insert into map_img_points(miid,pointtype,pointid, pointcode, positionx, positiony, pointinfo) values ('地圖id', '" + opoint.point_type + "', '" + opoint.point_bm + "','" + opoint.point_code + "','" + xyArray[0] + "','" + xyArray[1] + "', '" + opoint.point_info + "')";
                    executeUpdate(sql, database);
                    return "success";

                }
            }
            catch (NullReferenceException e)
            {
                return e.StackTrace;
            }
        }

Data Source ：  一個點默認爲本地數據庫，其餘數據庫填寫相應ip ； 

Initial Catelog：是目標數據庫名稱

咱們接收一個json數據，將其value填入一個實例化的類對象，經過這個類的實例化對象來使用它

OverlaysPoint opoint = JsonConvert.DeserializeObject<OverlaysPoint>(data);

根據json建立的OverPoint類：

public class OverlaysPoint
    {
        public string point_type;
        public string point_bm;
        public string point_code;
        public string position;
        public string point_info;
        public string con_bussiness;
        public string con_entity;
        public string con_fields;
        public string showpic;
        public string showtext;
        public string showdata;
        public string create_time;
        public string data_refresh_rate;
    }

executeQuery和executeUpdate方法（可重用）：

//對數據庫操做
        //用於查詢
        private DataTable executeQuery(string sqlStr, string sqlCon)      
        {
            SqlConnection con = new SqlConnection(@sqlCon);
            con.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = sqlStr;
            DataTable dt = new DataTable();        //實例化數據表
            SqlDataAdapter msda;
            msda = new SqlDataAdapter(cmd);        //實例化適配器
            msda.Fill(dt);                        //保存數據
            con.Close();
            return dt;
        }
        //用於增刪改;
        private int executeUpdate(string sqlStr, string sqlCon)      
        {
            SqlConnection con = new SqlConnection(@sqlCon);
            con.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = sqlStr;
            int iud = 0;
            iud = cmd.ExecuteNonQuery();
            con.Close();
            return iud;
        }

 

 要使用JsonConvert須要引入外部依賴包 Newtonsoft.Json.dll 。

右鍵項目解決方案-添加引用-

 

 2.ajax調用：

var jsonOverlays = JSON.stringify(data.field).replace(/\"/g,"'");// 將json數據的雙引號替換爲單引號

$.ajax({
                type:"POST",
                contentType: "application/json; charset=utf-8",
                url:"http://192.168.21.1:7777/WebService1.asmx/InsertPoint",
                data: "{\"data\":\"" + jsonOverlays + "\"}",  //這是post請求要傳遞的參數
                dataType: 'json', //預期返回類型
                success: function(result){    //回調函數
                    layer.msg('ajax調用成功' + result.d);
                    console.log(result.d);
                },
                error: function (data) {
                    //200的響應有可能被認爲error, responseText中沒有Message部分
                    alert('error');
                },
                complete: function (data) {
                    ; //after success ot error
                }
            });

注意：1.雙引號替換爲單引號  2.構造data的參數 

 

ps：報錯：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

解決跨域問題：

 

<httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Credentials" value="true"/>
            <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
            <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
            <add name="Access-Control-Allow-Origin" value="*"/>
        </customHeaders>
    </httpProtocol>

 

 

2019-1-22測試無誤：

 

若是出錯，注意查看瀏覽器端控制檯報錯（ajax出錯）和vs輸出窗口（c#方法出錯）