前后端分离（二）

来源：互联网发布：港股直通车软件编辑：程序博客网时间：2024/05/18 03:14

一、数据库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

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Ajax</title>    <script language="javascript">        var http = null;        function getHttp() {            //获取XMLHttpRequest对象            var http = null;            try {                if (window.ActiveXObject)                    http = new ActiveXObject("Microsoft.XMLHTTP");                else if (window.XMLHttpRequest)                    http = new XMLHttpRequest();                else                    alert('Getting XMLHttpRequest faild');            }            catch (exp) {                alert(exp.description);            }            return http;        }        function process() {            if (http.readyState == 4) {                //获取服务器响应，显示结果                document.getElementById("msg").innerHTML = http.responseText;            }        }        function getDateTime() {            try {                //获取XMLHttpRequest对象                if (http == null) {                    http = getHttp();                }                http.onreadystatechange = process;                //获取数据                var obj = new Object();                obj.province = document.getElementById("province").value;                obj.city = document.getElementById("city").value;                var s = JSON.stringify(obj);                //s = "&s="+s;                s = encodeURI(s);                s = encodeURI(s); //两次编码                //发送数据                http.open("GET", "server.ashx?&s=" + s + "&rnd=" + Math.random().toString(), true);                //http.open("POST", "server.ashx?&rnd=" + Math.random().toString(), true);                //设置数据格式                //http.setRequestHeader("content-Type", "application/json");                http.send(null);            }            catch (exp) {                alert(exp.description);            }        }    </script></head><body>    省份<input type="text" id="province" value="广东" style="width:50px" />    城市<input type="text" id="city" value="深圳" style="width:50px" />    <input type="submit" value="提交" onclick="getDateTime()"><br/>    <span id="msg"/></body></html>

server.ashx

<%@ WebHandler Language="C#" Class="DEMO.server" Debug="true" %>using System;using System.Web;using System.Data;using System.Data.SqlClient;using Newtonsoft.Json;using Newtonsoft.Json.Linq;namespace DEMO{    public class server : IHttpHandler    {        private SQLHelper sqlhelper = null;        //初始化        public server()        {            sqlhelper = new SQLHelper();         }                public bool IsReusable        {            get            {                return false;            }        }        public void ProcessRequest(HttpContext context)        {            //接收s            String s=context.Request.QueryString["s"];            //context.Response.ContentType = "application/json";            //context.Response.Cache.SetCacheability(HttpCacheability.NoCache);            //using (var reader = new System.IO.StreamReader(context.Request.InputStream))            //{            //    String s = reader.ReadToEnd();            //    if (!string.IsNullOrEmpty(s))            //    {            //        //业务处理            //    }            //}                        //String s = context.Request.QueryString["s"];            s = System.Web.HttpUtility.UrlDecode(s);            //将json字符串转换为对象            //JObject jObject = (JObject)JsonConvert.DeserializeObject(s);            //JArray jar = JArray.Parse(jObject["RTDataSets"].ToString());            JObject jObject = JObject.Parse(s);                  //接收province参数            String p = (string)jObject["province"];            //接收city参数            String c = (string)jObject["city"];            //context.Response.Clear();            //context.Response.ContentType = "text/plain";            //context.Response.Write(p + " " + c);            //context.Response.Flush();            if (Insert(p, c))            {                context.Response.Write("增加("+p+","+c+")成功！");             }            else            {                context.Response.Write("增加(" + p + "," + c + ")失败！");             }        }        //插入函数        public bool Insert(string pName,string cName)        {            bool flag = false;            string sql = "insert into cities(pName,cName) values(@pName,@cName)";            SqlParameter[] para = new SqlParameter[]{            new SqlParameter("@pName",pName),            new SqlParameter("@cName",cName)            };            int res = sqlhelper.ExecuteNonQuery(sql, para);            if (res > 0)            {                flag = true;            }            return flag;                    }    }}

SQLHelper.cs

/*  * author :  H * time: 2015/5/30 16:50:04  * explain  : 数据库助手类 */using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Data;using System.Data.SqlClient;using System.Configuration;namespace DEMO{    public class SQLHelper    {        private SqlConnection conn = null;        private SqlCommand cmd = null;        private SqlDataReader sdr = null;        public SQLHelper()        {            string connStr = ConfigurationManager.ConnectionStrings["connStr"].ConnectionString;            conn = new SqlConnection(connStr);        }        private SqlConnection GetConn()        {            if (conn.State == ConnectionState.Closed)            {                conn.Open();            }            return conn;        }        /// <summary>        /// 执行带参数的SQL增删改语句        /// </summary>        /// <param name="sql">增删改SQL语句</param>        /// <param name="para">参数集合</param>        /// <returns></returns>        public int ExecuteNonQuery(string sql, SqlParameter[] para)        {            int res;            using (cmd = new SqlCommand(sql, GetConn()))            {                cmd.Parameters.AddRange(para);                res = cmd.ExecuteNonQuery();            }            return res;        }        /// <summary>        /// 执行带参数的SQL查询        /// </summary>        /// <param name="sql">SQL语句</param>        /// <param name="para">参数集合</param>        /// <returns></returns>        public DataTable ExecuteQuery(string sql, SqlParameter[] para)        {            DataTable dt = new DataTable();            cmd = new SqlCommand(sql, GetConn());            cmd.Parameters.AddRange(para);            using (sdr = cmd.ExecuteReader(CommandBehavior.CloseConnection))            {                dt.Load(sdr);            }            return dt;        }    }}

数据库已经在文章的开头给出这里不再赘述。

0 0