• 【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 
  • 相关阅读:
    [Python自学] PyQT5-Web控件、与JavaScript交互
    [Python自学] PyQT5-选项卡窗口、堆栈窗口、停靠窗口、子窗口
    [Python自学] PyQT5-窗口风格、窗口样式、GIF动画、窗口透明
    [Python自学] PyQT5-子线程更新UI数据、信号槽自动绑定、lambda传参、partial传参、覆盖槽函数
    [Python自学] PyQT5-信号与槽
    [Python自学] PyQT5-菜单栏、工具栏、状态栏
    [Python自学] PyQT5-控件拖拽、剪切板
    [Python自学] PyQT5-各种QDialog对话框
    [Python自学] PyQT5-QSpinBox、QSlider控件
    Linux操作系统分析 | 课程学习总结报告
  • 原文地址:https://www.cnblogs.com/3309-whp/p/9442580.html
Copyright © 2020-2023  润新知