前后端分离(二)

一、数据库city

一张表cities,四个字段pName、cName、cNote、cImage

二、JavaScript基础

1、获取与设置元素的value值

常用的<input type="text" />,<textarea>等文本框的value属性就是输入的值,DOM中通过:

document.getElementById("id").value;

来获取与设置id那个元素的值,例如:

//设置id="province"的value的值为“广东”;

document.getElementById("province").value="广东";

//获取id="province"的value的值;

var v=document.getElementById("province").value;

2、获取与设置元素的innerHTML属性值

常用的<div>,<span>等元素的innerHTML属性就是显示的值,DOM中通过:

document.getElementById("id").innerHTML;

来获取与设置id那个元素的值,例如:

//设置id="msg"的innerHTML的值为“广东”;

document.getElementById("msg").innerHTML="广东";

//获取id="msg"的innerHTML的值;

var v=document.getElementById("msg").innerHTML;

三、JSON基础

把一个对象转为JSON格式的字符串成为对象的序列化,一个对象只有序列化成一个字符串后才能在网络上传输。反过来,一个接收到JSON字符串必须转化为一个对象才能在程序中使用,这个过程称为JSON字符串反序列化。

四、DEMO

简述:这个DEMO实现的功能是在前端页面点击提交按钮,前端页面将要提交的数据转化为JSON格式,然后通过Ajax将JSON数据传输到后台,后接受到数据之后将JSON数据字符串反序列化为对象,再插入数据库,如果插入成功再在前端页面上打印出插入成功的字样。

client.html

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>Ajax</title>  
  6.     <script language="javascript">  
  7.         var http = null;  
  8.         function getHttp() {  
  9.             //获取XMLHttpRequest对象  
  10.             var http = null;  
  11.             try {  
  12.                 if (window.ActiveXObject)  
  13.                     http = new ActiveXObject("Microsoft.XMLHTTP");  
  14.                 else if (window.XMLHttpRequest)  
  15.                     http = new XMLHttpRequest();  
  16.                 else  
  17.                     alert('Getting XMLHttpRequest faild');  
  18.             }  
  19.             catch (exp) {  
  20.                 alert(exp.description);  
  21.             }  
  22.             return http;  
  23.         }  
  24.   
  25.         function process() {  
  26.             if (http.readyState == 4) {  
  27.                 //获取服务器响应,显示结果  
  28.                 document.getElementById("msg").innerHTML = http.responseText;  
  29.             }  
  30.         }  
  31.   
  32.         function getDateTime() {  
  33.             try {  
  34.                 //获取XMLHttpRequest对象  
  35.                 if (http == null) {  
  36.                     http = getHttp();  
  37.                 }  
  38.   
  39.                 http.onreadystatechange = process;  
  40.                 //获取数据  
  41.                 var obj = new Object();  
  42.                 obj.province = document.getElementById("province").value;  
  43.                 obj.city = document.getElementById("city").value;  
  44.                 var s = JSON.stringify(obj);  
  45.                 //s = "&s="+s;  
  46.                 s = encodeURI(s);  
  47.                 s = encodeURI(s); //两次编码  
  48.                 //发送数据  
  49.                 http.open("GET", "server.ashx?&s=" + s + "&rnd=" + Math.random().toString(), true);  
  50.                 //http.open("POST", "server.ashx?&rnd=" + Math.random().toString(), true);  
  51.                 //设置数据格式  
  52.                 //http.setRequestHeader("content-Type", "application/json");  
  53.                 http.send(null);  
  54.   
  55.             }  
  56.             catch (exp) {  
  57.                 alert(exp.description);  
  58.             }  
  59.         }  
  60.     </script>  
  61.   
  62. </head>  
  63. <body>  
  64.     省份<input type="text" id="province" value="广东" style="width:50px" />  
  65.     城市<input type="text" id="city" value="深圳" style="width:50px" />  
  66.     <input type="submit" value="提交" onclick="getDateTime()"><br/>  
  67.     <span id="msg"/>  
  68. </body>  
  69. </html>  

server.ashx

[cpp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <%@ WebHandler Language="C#" Class="DEMO.server" Debug="true" %>  
  2. using System;  
  3. using System.Web;  
  4. using System.Data;  
  5. using System.Data.SqlClient;  
  6. using Newtonsoft.Json;  
  7. using Newtonsoft.Json.Linq;  
  8.   
  9. namespace DEMO  
  10. {  
  11.     public class server : IHttpHandler  
  12.     {  
  13.         private SQLHelper sqlhelper = null;  
  14.         //初始化  
  15.         public server()  
  16.         {  
  17.             sqlhelper = new SQLHelper();   
  18.         }  
  19.           
  20.         public bool IsReusable  
  21.         {  
  22.             get  
  23.             {  
  24.                 return false;  
  25.             }  
  26.         }  
  27.         public void ProcessRequest(HttpContext context)  
  28.         {  
  29.             //接收s  
  30.             String s=context.Request.QueryString["s"];  
  31.             //context.Response.ContentType = "application/json";  
  32.             //context.Response.Cache.SetCacheability(HttpCacheability.NoCache);  
  33.             //using (var reader = new System.IO.StreamReader(context.Request.InputStream))  
  34.             //{  
  35.             //    String s = reader.ReadToEnd();  
  36.   
  37.             //    if (!string.IsNullOrEmpty(s))  
  38.             //    {  
  39.             //        //业务处理  
  40.             //    }  
  41.             //}  
  42.   
  43.               
  44.             //String s = context.Request.QueryString["s"];  
  45.             s = System.Web.HttpUtility.UrlDecode(s);  
  46.             //将json字符串转换为对象  
  47.             //JObject jObject = (JObject)JsonConvert.DeserializeObject(s);  
  48.             //JArray jar = JArray.Parse(jObject["RTDataSets"].ToString());  
  49.             JObject jObject = JObject.Parse(s);  
  50.         
  51.             //接收province参数  
  52.             String p = (string)jObject["province"];  
  53.   
  54.             //接收city参数  
  55.             String c = (string)jObject["city"];  
  56.             //context.Response.Clear();  
  57.             //context.Response.ContentType = "text/plain";  
  58.             //context.Response.Write(p + " " + c);  
  59.             //context.Response.Flush();  
  60.             if (Insert(p, c))  
  61.             {  
  62.                 context.Response.Write("增加("+p+","+c+")成功!");   
  63.             }  
  64.             else  
  65.             {  
  66.                 context.Response.Write("增加(" + p + "," + c + ")失败!");   
  67.             }  
  68.         }  
  69.         //插入函数  
  70.         public bool Insert(string pName,string cName)  
  71.         {  
  72.             bool flag = false;  
  73.             string sql = "insert into cities(pName,cName) values(@pName,@cName)";  
  74.             SqlParameter[] para = new SqlParameter[]{  
  75.             new SqlParameter("@pName",pName),  
  76.             new SqlParameter("@cName",cName)  
  77.             };  
  78.             int res = sqlhelper.ExecuteNonQuery(sql, para);  
  79.             if (res > 0)  
  80.             {  
  81.                 flag = true;  
  82.             }  
  83.             return flag;  
  84.               
  85.         }  
  86.   
  87.   
  88.     }  
  89. }  

SQLHelper.cs

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /*  
  2.  * author :  H 
  3.  * time: 2015/5/30 16:50:04  
  4.  * explain  : 数据库助手类 
  5.  */  
  6. using System;  
  7. using System.Collections.Generic;  
  8. using System.Linq;  
  9. using System.Text;  
  10. using System.Threading.Tasks;  
  11. using System.Data;  
  12. using System.Data.SqlClient;  
  13. using System.Configuration;  
  14.   
  15. namespace DEMO  
  16. {  
  17.     public class SQLHelper  
  18.     {  
  19.         private SqlConnection conn = null;  
  20.         private SqlCommand cmd = null;  
  21.         private SqlDataReader sdr = null;  
  22.         public SQLHelper()  
  23.         {  
  24.             string connStr = ConfigurationManager.ConnectionStrings["connStr"].ConnectionString;  
  25.             conn = new SqlConnection(connStr);  
  26.         }  
  27.         private SqlConnection GetConn()  
  28.         {  
  29.             if (conn.State == ConnectionState.Closed)  
  30.             {  
  31.                 conn.Open();  
  32.             }  
  33.             return conn;  
  34.         }  
  35.   
  36.         /// <summary>  
  37.         /// 执行带参数的SQL增删改语句  
  38.         /// </summary>  
  39.         /// <param name="sql">增删改SQL语句</param>  
  40.         /// <param name="para">参数集合</param>  
  41.         /// <returns></returns>  
  42.         public int ExecuteNonQuery(string sql, SqlParameter[] para)  
  43.         {  
  44.             int res;  
  45.             using (cmd = new SqlCommand(sql, GetConn()))  
  46.             {  
  47.                 cmd.Parameters.AddRange(para);  
  48.                 res = cmd.ExecuteNonQuery();  
  49.             }  
  50.             return res;  
  51.         }  
  52.   
  53.         /// <summary>  
  54.         /// 执行带参数的SQL查询  
  55.         /// </summary>  
  56.         /// <param name="sql">SQL语句</param>  
  57.         /// <param name="para">参数集合</param>  
  58.         /// <returns></returns>  
  59.         public DataTable ExecuteQuery(string sql, SqlParameter[] para)  
  60.         {  
  61.             DataTable dt = new DataTable();  
  62.             cmd = new SqlCommand(sql, GetConn());  
  63.             cmd.Parameters.AddRange(para);  
  64.             using (sdr = cmd.ExecuteReader(CommandBehavior.CloseConnection))  
  65.             {  
  66.                 dt.Load(sdr);  
  67.             }  
  68.             return dt;  
  69.         }  
  70.     }  
  71. }  

来源:

http://blog.youkuaiyun.com/finish_dream/article/details/51346480

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值