【Ajax请求 】- 1.1前端和后台数据交互的说明
输入用户名和密码,点击提交后,向数据库插入一条数据,并由服务端像客户端发出插入成功的信息
前端页面如图
效果如下
下面来介绍请求和返回数据的步骤
1. HtmlPage1.html中给input 按钮添加onclick()事件
1 <input type="button" id="btnSend" value="提交" onclick="btnSend_onclick()"/><br />
2. js中编写btnSend_onclick()方法
2.1 js获取控件的值
1 var txt1 = $('#txt1').val(); 2 var txt2 = $('#txt2').val();
2.2 JSON对象的序列化,使用 JSON.stringify()方法,
也就是将输入值包装成json字符串格式 "{"txtUsername":"123","txtPassword":"124"}" ,结果是string类型
1 string jsonString = JSON.stringify({ txt1: txt1, txt2: txt2 });
2.3 $.ajax() 请求代码如下
1 $.ajax({ 2 url: "Handler1.ashx", //后台处理程序 3 type: "post", 4 data: jsonString, 5 dataType: "json", //返回的数据类型 6 success: function (data) { 7 console.log(data);11 } 12 });
3 Handler1.ashx 处理后台逻辑
3.1 获取前台传入的数据
1 定义一个类用来将前端传递过来的数据进行反序列化
注意:此处定义类的属性必须要和前端序列化JSON对象中的key值相同,否则,后台赋值不上!!!!
var jsonString = JSON.stringify({ txtUsername: txtUsername, txtPassword: txtPassword });
namespace Web.Login { public class USER { public string txtUsername { get; set; } public string txtPassword { get; set; } }
2 JSON字符串转换成json对象(即反序列化)
有两种方法:
JavaScriptSerializer
JsonConvert 需要添加引用,然后using Newtonsoft.Json;
//第一种 JavaScriptSerializer
string jstrUser = new StreamReader(context.Request.InputStream).ReadToEnd(); //json字符串
USER joUser = new JavaScriptSerializer().Deserialize<USER>(jstrUser);
//第二种JsonConvert
string jstrUser = new StreamReader(context.Request.InputStream).ReadToEnd(); //json字符串
USER joUser = JsonConvert.DeserializeObject<USER>(jstrUser);
3. 使用joUser 获取需要的字段用于后台使用
3.2 后台传出数据
1. 定义一个类,用于序列化之后传递给前端
1 public class USER { 2 public string username { get; set; } 3 public string password { get; set; } 4 }
2.
USER user = new USER(); user.username = username; user.password = password;
3 将数据转换成jsonstring
1 string jsonstring = JsonConvert.SerializeObject(user).ToString();
4.传出去
1 context.Response.ContentType = "application/json"; 2 context.Response.Write(jsonstring);
3.3 连接数据库(ADO.NET)
可参考文章 https://www.cnblogs.com/best/p/7714500.html
1.建立数据库连接并打开
1 string connstr = "Server=.;Database=TestDB;User ID=sa;Password=123456"; 2 SqlConnection conn=new SqlConnection(connstr); 3 conn.Open();
2.Command对象
1 var sqlstr = "INSERT INTO TestDB.dbo.[User](username,password)VALUES(@username,@password)"; 2 SqlCommand cmd = new SqlCommand(sqlstr, conn); 3 cmd.Parameters.Add("@username ", SqlDbType.Text).Value = username; 4 cmd.Parameters.Add("@password ", SqlDbType.Text).Value = password;
3.执行
1 rows = cmd.ExecuteNonQuery(); //执行增删改操作
4.处理返回数据
1 var msg = ""; 2 if (rows > 0) { 3 msg = "数据插入成功啦"; 4 5 } 6 7 string jsonstring = JsonConvert.SerializeObject(msg).ToString(); //转换成jsonstring 传出去 8 context.Response.ContentType = "application/json"; 9 context.Response.Write(jsonstring);
JQuery与一般处理程序之间传递JSON数据
https://blog.csdn.net/sinat_32832727/article/details/63685699