一、数据库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;
- }
- }
- }
来源:
http://blog.youkuaiyun.com/finish_dream/article/details/51346480