【Ajax请求 】- 1.1前端和后台数据交互的说明

输入用户名和密码，点击提交后，向数据库插入一条数据，并由服务端像客户端发出插入成功的信息

前端页面如图 

 效果如下

下面来介绍请求和返回数据的步骤

1.  HtmlPage1.html中给input 按钮添加onclick()事件

 <input type="button" id="btnSend"  value="提交" onclick="btnSend_onclick()"/><br />

2.  js中编写btnSend_onclick()方法

    2.1 js获取控件的值

var txt1 = $('#txt1').val();
var txt2 = $('#txt2').val();

     2.2 JSON对象的序列化，使用 JSON.stringify()方法,

         也就是将输入值包装成json字符串格式     "{"txtUsername":"123","txtPassword":"124"}"     ，结果是string类型

string jsonString = JSON.stringify({ txt1: txt1, txt2: txt2 });

    2.3 $.ajax() 请求代码如下

 $.ajax({
            url: "Handler1.ashx",  //后台处理程序
            type: "post",   
            data: jsonString,   
            dataType: "json",   //返回的数据类型
            success: function (data) { 
                console.log(data);11             }
        }); 

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. 定义一个类，用于序列化之后传递给前端

 public class USER {
            public string username { get; set; }
            public string password { get; set; }
        }

2.

 USER user = new USER();
 user.username = username;
 user.password = password;

3  将数据转换成jsonstring 

string jsonstring = JsonConvert.SerializeObject(user).ToString();

4.传出去

   context.Response.ContentType = "application/json";
   context.Response.Write(jsonstring);

3.3 连接数据库(ADO.NET)

可参考文章 https://www.cnblogs.com/best/p/7714500.html

1.建立数据库连接并打开

string connstr = "Server=.;Database=TestDB;User ID=sa;Password=123456";
SqlConnection conn=new SqlConnection(connstr);
conn.Open();

2.Command对象

 var sqlstr = "INSERT INTO TestDB.dbo.[User](username,password)VALUES(@username,@password)";
 SqlCommand cmd = new SqlCommand(sqlstr, conn);
 cmd.Parameters.Add("@username ", SqlDbType.Text).Value = username;
 cmd.Parameters.Add("@password ", SqlDbType.Text).Value = password;

3.执行

 rows = cmd.ExecuteNonQuery();  //执行增删改操作

4.处理返回数据

var msg = "";
 if (rows > 0) {
                    msg = "数据插入成功啦";                 
                
                }

 string jsonstring = JsonConvert.SerializeObject(msg).ToString();  //转换成jsonstring 传出去
 context.Response.ContentType = "application/json";
 context.Response.Write(jsonstring);

JQuery与一般处理程序之间传递JSON数据

https://blog.csdn.net/sinat_32832727/article/details/63685699