精华内容
下载资源
问答
  • 前后交互的方式图解,一些简单的图解,前端与后台的相关性
  • 主要介绍了springboot前后台数据交互的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了vue前后台数据交互vue-resource文档,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 里面有所需jar包,如jackson-annotations,jackson-core,jackson-databind,jstl-1.2,mysql-connector-java-5.1.7-bin,standard,不需再花多余C币
  • 前后台数据交互小结

    千次阅读 2019-02-03 21:45:31
    目录 引言 1、ajax 1.1、创建ajax ... 1.4、ajax使用xmlhttprequest对象读取数据 2、jQuery中使用ajax  2.1、函数解释 0.jQuery.load() 1.jQuery.get() 2.jQuery.post() 3.jQuery.getJSON()  ...

    目录

    引言

    1、ajax

    1.1、创建ajax

     1.2、ajax事件

    1.3、服务器响应格式

     1.4、ajax使用xmlhttprequest对象读取数据

    2、jQuery中使用ajax      

    2.1、函数解释

    0.jQuery.load()

    1.jQuery.get()

    2.jQuery.post()

    3.jQuery.getJSON()           

    4.jQuery.ajax() 

    2.2、区别

    3、$.ajax()日常案例

    4、前台提交数据

    5、前台获取数据

    6、后台获取数据

    7、后台发送数据

    8、总结


     

    引言

    今天写项目中遇到了一个问题,就是前后数据的交互,以前不论是jsp/servlet还是框架,用到的数据交互都是最为简单基础,也不尽如人意。之前想起来学的ajax,不就是做实时异步数据交互的么,尝试着写了写,发现困难重重。因为学的内容都是用get,post获取数据,不论是xml,HTML还是json,今天借着这个机会再次学习一下ajax,也总结一下前后台数据交互有哪些方式。毕竟在开发中这也是一块重点嘛。。。

    按我的理解数据交互的内容应当有如下几块:前台发送数据,解析数据,后台发送数据,解析数据

    之前使用的前后台交互无外乎以下几种:

    • 表单提交(前台--->后台)
    • 域属性(前台<===>后台)
    • xml总初始化参数(前台)
    • ajax

    首先,最原始的,通过form表单以post/get方式提交数据。

    当你点击submit按钮时,浏览器会默认把你在input里面输入的数据,以postget的方式提交到form表单中的action这个地址。相当于你提交表单时,就会向服务器发送一个请求,然后服务器会接受并处理提交过来的form表单,最后返回一个新的网页。

    1、get提交数据:请求参数(一般为input里的值)拼装成url,相当于向服务器发url请求。

                  特点:请求信息封装在URL中,所有人可见,不安全,容量小,胜在速度快。
    2、post提交数据:直接向服务器发请求,参数直接发给后台。

                  特点:请求信息封装在响应体中,安全,容量大,败在速度慢。

    但是,这种方法会导致几个问题:
    1、在提交时,页面会发生跳转或刷新,导致用户体验不好。
    2、单项提交,把数据提交给后台,但是不知道后台会给出怎样的响应,因为提交后页面就发生跳转了。比如:用户登录,那么就不知道到底是注册成功了还是失败了。
    3、浪费宽带。因为前后两个页面中的大部分HTML代码往往是相同的。但由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间,这就导致了用户界面的响应比本地应用慢的多。

    为了解决上述问题,2005年出现了Ajax。

    1、ajax

    1、Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+XML
    2、它是一种技术方案,但并不是一种新技术。
    3、它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口,使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。

    1.1、创建ajax

    1.建立xmlHttpRequest对象
    
        if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
        if(xmlHttp.overrideMimeType) {
         xmlHttp.overrideMimeType("text/xml");
        }
       } else if(window.ActiveXobject) {
        var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for(var i = 0; i < activeName.length; i++) {
         try {
          xmlHttp = new ActiveXobject(activeName[i]);
          break;
         } catch(e) {}
        }
       }
       if(!xmlHttp) {
        alert("创建xmlhttprequest对象失败");
       } else {}
    
    2.设置回调函数
    
       xmlHttp.onreadystatechange= callback;
    
       function callback(){}
    
    3.使用OPEN方法与服务器建立连接  xmlHttp.open("get","ajax?name="+ name,true)
    
       此步注意设置http的请求方式(post/get),如果是POST方式,注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    
    4.向服务器端发送数据
    
      xmlHttp.send(null);
    
      如果是POST方式就不为空
    
    5.在回调函数中针对不同的响应状态进行处理
    
      if(xmlHttp.readyState == 4){       //判断交互是否成功
    
          if(xmlHttp.status == 200){         //获取服务器返回的数据         //获取纯文本数据
    
            var responseText =xmlHttp.responseText;
    
           document.getElementById("info").innerHTML = responseText;
    
          }
    
       }

    其中最为重要的对象便是xmlHttpRequest了,一切的操作都依赖于此对象,

    xmlHttpRequest属性:

    1. onreadystatechange每个状态改变时都会触发这个时间处理器,通常都会调用一个JavaScript函数。
    2. readyState请求的状态,有五个可取指,0=未初始化,1=正在加载,2=已经加载,3=交互中,4=完成。
    3. responseText服务器的响应,表示为一个串,读取text格式数据。
    4. responseXML服务器的响应,表示为xml,这个对象可以解析为dom对象。
    5. status服务器的HTTP状态码(200对应OK,404对应notfount,等)。

    xmlHttpRequest方法:

    1. abort()停止当前请求
    2. getAllResponseHeaders()把HTTP请求的所有响应首部作为键值对返回
    3. getResponseHeader("header")返回指定首部的窜值
    4. open("method","url")建立对服务器的调用,其中url可以是相对地址也可以是绝对地址,亦可以带参数如                           xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
    5. send(content)向服务器发送请求
    6. setRequestHeader("header","value");把指定首部设置为所提供的值,在设置任何首部之前必须先调用open()

     1.2、ajax事件

    onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

    readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

    0: 请求未初始化

    1: 服务器连接已建立

    2: 请求已接收

    3: 请求处理中

    4: 请求已完成,且响应已就绪

    status 200: "OK"

    404: 未找到页面

    1.3、服务器响应格式

    1.3.1、xml

    优点:

    1. xml是一种通用的数据格式。
    2. 灵活。
    3. 利用都没可以完全掌控文档。

    缺点:

    1. 如果文档来自于服务器,就必须保证文档含有正确的首部信息,若文档类型不正确,nameresponsexml的值将是空的。
    2. 当浏览器接收到较长的xml文件后,dom解析可能会很复杂。

    json前台解析:

    json后台解析:

    1.3.2、HTML

    优点

    1. 不必从responseText属性中读取数据,不需要用JavaScript进行解析,它已是希望的格式,可以直接将它插入到页面中。
    2. HTML可读性好。
    3. HTML代码块能与innerHTML完美结合,效率高。

    缺点:

    1. 需要从ajax更新一篇文档的多个部分,HTML不合适,只适合整块读取。
    2. innerHTML并非dom标准。

    json前台解析:

    json后台解析:

    1.3.3、json

    json是一种简单的数据格式,必xml更轻巧。json是JavaScript原生格式,这意味着,JavaScript中处理json数据不需要任何特殊的api或者工具。

    json数组:

    json字符串

    json详情可参考我的另外一篇博客:https://blog.csdn.net/sinat_37064286/article/details/86554577

    优点:

          json和xml很相似,但是它更加灵巧。

          json不需要从服务器发送含有特定内动的首部信息。

    缺点:

          语法严谨。

          代码不已阅读。

          eval函数存在风险。

    json前台解析:

    json后台解析:

     1.4、ajax使用xmlhttprequest对象读取数据

    xml:

    <script type="text/javascript">
    
            window.onload=function () {
    
                //1.获取到a节点,并为其添加onclick响应函数
    
                document.getElementsByTagName("a")[0].onclick = function () {
    
                    //2.创建一个xmlhttprequest对象
    
                    var request = new XMLHttpRequest();
    
                    //3.准备发送请求的数据url
    
                    var url = this.href;
    
                    var method = "GET";
    
                    //4.调用xmlhttprequest队形的open方法
    
                    request.open(method, url);
    
                    //5.调用xmlhttprequest对象的send方法
    
                    request.send(null);
    
                    //6.为xmlhttprequest对象添加onreadystatechange响应函数
    
                    request.onreadystatechange = function () {
    
                        //7.判断响应是否完成xmlhttprequest对象的readystate属性
    
    
                        if (request.readyState == 4) {
    
                            //8.再判断响应函数是否 可用
    
                            if (request.status == 200 || request.status == 304) {
    
                                //9.打印响应结果,在responseText中
    
                                alert(request.responseText);
                            }
                        }
                    }
    
                    //0.取消a节点的默认行为
    
                    return false;
    
                }
            }
        </script>
    </head>
    <body>
        <a href="helloajax.text">HelloAjax</a>
    </body>

    HTML:

    <script type="text/javascript">
    
            window.onload=function () {
    
                //1.获取到a节点,并为其添加onclick响应函
    
                document.getElementsByTagName("a")[0].onclick = function () {
    
                    //2.创建一个xmlhttprequest对象
    
                    var request = new XMLHttpRequest();
    
                    //3.准备发送请求的数据url
    
                    var url = this.href;
    
                    var method = "GET";
    
                    //4.调用xmlhttprequest队形的open方法
    
                    request.open(method, url);
    
                    //5.调用xmlhttprequest对象的send方法
    
                    request.send(null);
    
                    //6.为xmlhttprequest对象添加onreadystatechange响应函数
                    request.onreadystatechange = function () {
    
                        //7.判断响应是否完成xmlhttprequest对象的readystate属性
    
                        if (request.readyState == 4) {
                            //8.再判断响应函数是否 可用
    
                            if (request.status == 200 || request.status == 304) {
    
                                //1.结果为xml格式,需要使用responsexml属性来获取
    
                                var result=request.responseXML;
    
                                //2.因为为xml格式,不能直接获取,需要创建对应节点,再把节点加到目标中。
    
                                var to=result.getElementsByTagName("to")[0].firstChild.nodeValue;
    
                                var from=result.getElementsByTagName("from")[0].firstChild.nodeValue;
    
                                var heading=result.getElementsByTagName("heading")[0].firstChild.nodeValue;
    
                                var body=result.getElementsByTagName("body")[0].firstChild.nodeValue;
                                alert(to);
                                alert(from);
    
                                alert(heading);
                                alert(body);
    
                                document.getElementById("mubiao").innerText=to;
                                document.getElementById("mubiao").innerText=heading;
    
                                //document.getElementById("mubiao").innerHTML=from;
                            }
                        }
                    }
                    //0.取消a节点的默认行为
                    return false;
                }
            }
        </script>
    </head>
    <body>
    <a href="jony.xml">HelloAjax</a>
    <div id="mubiao"></div>
    </body>

    json:

    由于jQuery封装了ajax,提供了更为方便简单的.get、.get、.post、.getJSON、.getJSON、.ajax

    所以呢下面重点来介绍以上几个方法怎么实现数据交互,以及前后台接受和解析

    先简单简绍一下这几个方法的使用,然后在将前后台接受和解析分为四个模块来应对日常使用

    2、jQuery中使用ajax      

    2.1、函数解释

    jQuery.load():使用load方法从服务器加载数据

    jQuery.get() :使用 HTTP GET 请求从服务器加载数据

    jQuery.post():使用 HTTP POST 请求从服务器加载数据

    jQuery.getJSON():使用 HTTP GET 请求从服务器加载 JSON 编码数据

    jQuery.ajax():执行异步 HTTP (Ajax) 请求   

    0.jQuery.load()

    ---------读取数据:

    <script type="text/javascript">
    $(document).ready(function(){
        $("#mybutton").click(function(){
            $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
                if(statusTxt=="success"){
                    alert("成功");
                }
                if(statusTxt=="error"){
                    alert("失败:"+xhr.status+":"+xhr.statusTxt);
                }
            });
        });
    })
    </script>

    下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容, 加载到指定的 <div> 元素中: 实例: $("#div1").load("demo_test.txt #p1");

    1.jQuery.get()

    $(selector).get(url,data,success(response,status,xhr),dataType)

    url必需。规定将请求发送的哪个 URL。
    data可选。规定连同请求发送到服务器的数据
    success(response,status,xhr)

    可选。规定当请求成功时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态
    • xhr - 包含 XMLHttpRequest 对象
    dataType

    可选。规定预计的服务器响应的数据类型。

    默认地,jQuery 将智能判断。

    可能的类型:

    • "xml"
    • "html"
    • "text"
    • "script"
    • "json"
    • "jsonp"

    简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

    例子:

    $.get(
      "product?type=111",{
      id:  '123',
      name:  '青藤园',
      },function(data,state){
      //这里显示从服务器返回的数据
      alert(data);
      //这里显示返回的状态
      alert(state);
      }
    )

    该函数是简写的 Ajax 函数,等价于:

    $.ajax({
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });

    --------读取数据

    $(document).ready(function(){
        $("#mybutton").click(function(){
            $.get("haha.txt",null,function(data,status){   
                alert(data+":"+status);
            });
        });
    });
    </script>

     

    2.jQuery.post()

    post() 方法通过 HTTP POST 请求从服务器载入数据

    这个方法和$.get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面$.get()的。

    type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式一样,都是字符串的。

    jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

    url必需。规定把请求发送到哪个 URL。
    data可选。映射或字符串值。规定连同请求发送到服务器的数据
    success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数
    dataType

    可选。规定预期的服务器响应的数据类型。

    默认执行智能判断(xml、json、script 或 html)

    默认执行智能判断(xml、json、script 或 html)。

    $.post(
      "product?type=111",{
      id:  '123',
      name:  '青藤园',
      },function(data,state){
      //这里显示从服务器返回的数据
      alert(data);
      //这里显示返回的状态
      alert(state);
      },
      "json"
    )
    <script type="text/javascript">
        $(document).ready(function() {
            $("#mybutton").click(function() {
                $.post("/Json/JsonServlet", {
                    name:"我是谁",
                    age:12
                }, function(data, status) {
                    alert(data + ":" + status);
                });
            });
        });
    </script>

    该函数是简写的 Ajax 函数,等价于:
     

    $.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });
    

    3.jQuery.getJSON()           

     使用 AJAX 请求来获得 JSON 数据,并输出结果
    函数没有type参数,返回的是json类型的,不需要转换。

    jQuery.getJSON(url,data,success(data,status,xhr))

    url必需。规定将请求发送的哪个 URL。
    data可选。规定连同请求发送到服务器的数据。
    success(data,status,xhr)

    可选。规定当请求成功时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态
    • xhr - 包含 XMLHttpRequest 对象
    <script type="text/javascript">
        $(document).ready(function() {
            $("#mybutton").click(function() {
                $.getJSON("JsonServlet", {
                    name:"我是谁",
                    age:12
                }, function(json) {
                    alert(json.name);
                    $("#mydiv").html(json.name);
                });
            });
        });
    </script>
    


    该函数是简写的 Ajax 函数,等价于:

    $.ajax({
      url: url,
      data: data,
      success: callback,
      dataType: json
    });

    返回的就直接是json格式的对象,无需JSON.parse的方法转换

    从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:

    $.getJSON("test.js", function(json){
      alert("JSON Data: " + json.users[3].name);
    });

    相同的最终传递给前台的时候都默认以字符串的形式传递过去, 
    注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象:

    1. eval()函数  :不推荐,有隐患 会执行其他js操作
    2. JSON.parse()函数 :推荐:只执行对象转换操作

    4.jQuery.ajax() 

         
    执行异步 HTTP (Ajax) 请求

    该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

    最简单的情况下,$.ajax() 可以不带任何参数直接使用。

    注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

    jQuery.ajax([settings])

    settings    可选。用于配置 Ajax 请求的键值对集合。

    可以通过 $.ajaxSetup() 设置任何选项的默认值。

    具体该方法的参数可以观看另外一篇博客:https://www.cnblogs.com/tylerdonet/p/3520862.html

    通过 AJAX 加载一段文本:

    //jQuery 代码:
    <script type="text/javascript">
        $(document).ready(function() {
            $("#mybutton").click(function() {
                $.ajax({
                    url : "/Json/JsonServlet",
                    type : "POST",
                    async : true,
                    dataType : "json",
                    data : {
                        name : "前台数据",
                        age : 12
                    },
                    success : function(result) {
                        $("#mydiv").html(result.name);
                    },
                    error : function(xhr) {
                        alert("错误提示: " + xhr.status + " " + xhr.statusText);
                    }
                });
            });
        });
    </script>
    
    //HTML 代码:
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button id="b01" type="button">Change Content</button>
    
    

    最后一种方式是依附于表单:表单的局部刷新 
    序列化表单方法: 
    serialize():将表单内容序列化成一个字符串。

    serializeArray():将表单内容序列化成一个对象数组

    这里只介绍:serialize() 
    看script:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#mybutton").click(function() {
                //var frm=$("#form1").serializeArray();
                var frm = $("#form1");
                $.ajax({
                    url : frm.attr("action"),
                    type : frm.attr("method"),
                    async : true,
                    data : frm.serialize(),
                    //var data=$("#form1").serializeArray();
    
                    success : function(data) {
                        alert("ok");
                    },
                    error : function(data) {
                        alert(data.status);
                    }
                });
            });
        });
    </script>


    form表单:

    <form id="form1"
            action="${pageContext.request.contextPath}/ClassServlet" method="POST">
            <input type="text" name="name" /> <input type="password"
                name="password" /> <input type="button" id="mybutton" value="点我" />
        </form>

    注意:

    使用:serialize()

    这时表单的按钮的type不可以是submit,否则自提交数据,  
    也就是自动刷新; 用Ajax的serialize()提交表单,  
    如果input的type为submit,提交时就会自动刷新,  
    所以,用serialize()提交表单的时候最好把type改为button.这里呢如果是验证账号是否存在等可以使用submit。。

    2.2、区别

     

    • GET - 从指定的资源请求数据,发送至服务器的key/value数据会作为QueryString附加到请求URL中,服务器返回数据的格式其实是字符串形式,并不是我们想要的json数据格式
    • POST - 向指定的资源提交要处理的数据,这个函数跟.get()参数差不多,多了一个type参数,type为返回的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和.get()参数差不多,多了一个type参数,type为返回的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和.get()返回的格式一样,都是字符串的
    • getJSON-使用 AJAX 请求来获得 JSON 数据,使用JSON相比传统的通过 GET、POST直接发送“裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 
    • ajax()函数的一个简化版本。这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式,让程序执行回调函数X。
    • ajax()-$.ajax() 返回其创建的 XMLHttpRequest 对象

    3、$.ajax()日常案例

    //1.$.ajax带json数据的异步请求  
    var aj = $.ajax( {    
        url:'productManager_reverseUpdate',// 跳转到 action    
        data:{    
                 selRollBack : selRollBack,    
                 selOperatorsCode : selOperatorsCode,    
                 PROVINCECODE : PROVINCECODE,    
                 pass2 : pass2    
        },    
        type:'post',    
        cache:false,    
        dataType:'json',    
        success:function(data) {    
            if(data.msg =="true" ){    
                // view("修改成功!");    
                alert("修改成功!");    
                window.location.reload();    
            }else{    
                view(data.msg);    
            }    
         },    
         error : function() {    
              // view("异常!");    
              alert("异常!");    
         }    
    });
    
    //2.$.ajax序列化表格内容为字符串的异步请求  
    
    function noTips(){    
    
        var formParam = $("#form1").serialize();//序列化表格内容为字符串    
    
        $.ajax({    
    
            type:'post',        
    
            url:'Notice_noTipsNotice',    
    
            data:formParam,    
    
            cache:false,    
    
            dataType:'json',    
    
            success:function(data){    
    
            }    
    
        });    
    
    }    
    //3.$.ajax拼接url的异步请求  
    
    var yz=$.ajax({    
    
         type:'post',    
    
         url:'validatePwd2_checkPwd2?password2='+password2,    
    
         data:{},    
    
         cache:false,    
    
         dataType:'json',    
    
         success:function(data){    
    
              if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间    
    
              {    
    
                   textPassword2.html("<font color='red'>业务密码不正确!</font>");    
    
                   $("#validatePassword2").val("pwd2Error");    
    
                   checkPassword2 = false;    
    
                   return;    
    
               }    
    
          },    
    
          error:function(){}    
    
    });   
    
    //4.$.ajax拼接data的异步请求  
    
    $.ajax({     
    
        url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',     
    
        type:'post',     
    
        data:'merName='+values,     
    
        async : false, //默认为true 异步     
    
        error:function(){     
    
           alert('error');     
    
        },     
    
        success:function(data){     
    
           $("#"+divs).html(data);     
    
        }  
    
    });   

    需要注意的是:后台导入的json   jar包为import net.sf.json.JSONObject;      import org.json.JSONArray.*;

    4、前台提交数据

    前面讲的几乎都是ajax提交数据,包含了$.ajax()表单序列化提交,实时验证用户账号是否存在,以及各种方法提交数据。

    还可以使用<a href="xxx.xxx?username='liufukin'">请求服务器</a>

    5、前台获取数据

    获取到三种数据格式--->解析( json数组,json对象,多个json对象,其他格式数据)--->输出

    前台获取数据也就是在ajax   success方法中获取data并执行相关操作,这里先将json格式数据,以后再补充其他格式数据^_^。

    json数组:
             JSONArray jsonArray2 = JSONArray.fromObject( list );(其中list为后台要返给前台的数据)

    传回来的json数组,前台可以通过以下方法获取数据

    data[0].username+" " + data[0].password
    

    也可以通过$.each来遍历json数组

    success: function (data ,textStatus, jqXHR)
                    {
                        var datas = eval(data);//将msg化为数组
                        var num = 1;
                        $.each(datas, function (num) {
                            //alert(data[num].userName);
                            var id = datas[num].id;//注意要与实体类中的名称相同
                            var Name = datas[num].name;
                            var publicHouse = datas[num].publicHouse;
                            var publicDate = datas[num].publicDate;
                            var author = datas[num].author;
                            var description = datas[num].description;
                            var price = datas[num].price;
                            //alert(id,Name,publicDate,publicHouse,author,description,price);
                            var value = "<tr><td align='center'><input name='checked' type='checkbox'  value=" + id + "/></td>";
                            value += "<td align='center'>" + Name + "</td> <td align='center'>" + Name + "</td> <td align='center'>" + publicHouse + "</td> <td align='center'>" + publicDate + "</td><tr/>";
                            $("#tb").append(value);//写入到id为tb的html部分
                        });
                    },
    
    
    还可以
    success:function(data){
          var i=0;
          for(var libiary in data){
          alert(data[i].author+":"+data[i].price);
          i++;
             }
         },

    body标签内容:

    <table  id="tb" width="80%" border="1" cellspacing="0" cellpadding="0"  align="center" >
        <tr>
            <%--   <th align="center"><input name="checked" type="checkbox" /></th>--%>
            <th align="center">ID</th>
            <th align="center">Name</th>
            <th align="center">Password</th>
            <th align="center">Phone</th>
            <th align="center">Address</th>
        </tr>
    </table>
    其中标签有一些出入,自己改一下就好了O(∩_∩)O哈哈~

    json对象:

    后台代码:

    JSONObject object = new JSONObject();  //创建Json对象
    object.put("username", "张三");         //设置Json对象的属性
    object.put("password", "123456");
    System.out.println(object.toString());  //调用toString方法将json对象转换成json字符串
    
    //把json数据返回给浏览器:
    resp.setContentType("application/json; charset=utf-8");
            PrintWriter out = resp.getWriter();
            JSONArray ja=JSONArray.fromObject(libiaries);
            out.print(ja);
    //或者
    response.getWriter().write(jsonObject.toString());

    前台代码:(单个对象)

    success: function(result){
    var newData = JSON.stringify(result);    //将json对象转换为字符串
    newData = eval("("+newData+")");   /解析json
    
    var annualDays = newData.annualDays;
    var entryDate = newData.entryDate;
    
    $("input[name='extendDataFormInfo.value(fd_shengyu_nianjia)']").val(annualDays);
    $("input[name='extendDataFormInfo.value(fd_ruzhi_date)']").val(entryDate);
    
    }});
    

    所有现代浏览器都支持 JSON 对象,有两个非常有用的方法来处理 JSON 格式的内容:

    • JSON.parse(string) :接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
    • JSON.stringify(obj) :接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。
    • var json = eval("("+data+")");接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。

    多个json对象:

    后台

    resp.setContentType("charset=utf-8");
            resp.setCharacterEncoding("utf-8");
            JSONObject object = new JSONObject();  //创建Json对象
            object.put("username", "张三");         //设置Json对象的属性
            object.put("password", "123456");
            object.put("username1","张思");
            object.put("password1","1314");
            System.out.println(object);
            System.out.println(object.toString());  //调用toString方法将json对象转换成json字符串
    
            //把json数据返回给浏览器:
            resp.getWriter().write(object.toString());

    前台获取json字符串,转换成json对象并输出

    success:function(data){
        alert("hello");
        var json = eval("("+data+")");
        //var json=JSON.parse(data);
        alert(json);
        for(var js2 in json){
    
            alert( js2+"="+json[js2]);
    
        }
    },

    6、后台获取数据

    这里呢可以细分为从前台传来的数据,从资源文件中获取数据。

    从前台获取去传来的数据,直接用getParameter("ParamName")或者获取域属性以及xml中初始化参数。。

    从资源文件中获取数据呢使用Properties,FileInputStream类,直接看一个案例吧

     //private static final String dbconfig = "./src/main/java/utils/dbconfig.properties";
        private static final String dbconfig = "E:/Tomcat9.0/apache-tomcat-9.0.14/webapps/shopping/WEB-INF/classes/resource/dbconfig.properties";
        private static Properties prop = new Properties();
        static {
            try {
               // InputStream in = Thread.currentThread().getContextClassLoader().getResourceAsStream(dbconfig);
                FileInputStream in=new FileInputStream(dbconfig);
                prop.load(in);
                Class.forName(prop.getProperty("driverClassName"));
            } catch (Exception e) {
                throw new RuntimeException(e);
                }
        }
        public static Connection getConnection() {
            try {
                return DriverManager.getConnection(prop.getProperty("url"), prop.getProperty("username"), prop.getProperty("password"));
            } catch (Exception e) {
                throw new RuntimeException(e);
            }
        }

    7、后台发送数据

    1、

    resp.setContentType("application/json; charset=utf-8");
            PrintWriter out = resp.getWriter();
            JSONArray ja=JSONArray.fromObject(libiaries);
            out.print(ja);

    其中libiaries是一个list数据。。

    2、

    response.setContentType("application/json; charset=utf-8");也可以不实用返回的是字符串
    PrintWriter out = cu.getWriterOut(response);
    out.print(object.toString());
    //或者
    response.getWriter().write(jsonObject.toString());

    其实这两个方法都是同一个原理,大家做个参考就好了。。。

    8、总结

    其中感觉还有好多地方没有完全讲清楚,以后有机会更新。。。

     

    参考了:

    https://blog.csdn.net/qq_36140085/article/details/81567592

    https://blog.csdn.net/huileiforever/article/details/12163385

    https://blog.csdn.net/qq_38409944/article/details/81352251

     

     

     

    展开全文
  • 事出偶然,本来公司强调的是用WCF 做项目审批流程,WPF /E 增强用户体验;由于个人的无知与偷懒,我产生了天真的想法:用WPF/E 来做审批流程,这... 前台Silverlight 表现层语言xaml , 后台服务器脚本语言C# ,数据
  • java前后台数据交互【亲测】

    千次阅读 2018-11-27 14:27:04
    我添加了俩条数据(其实一条就好了。。。不影响) 2.登录界面的代码(前端代码) <h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录 请输入登录账号" ...

    AJAX的POST方法传值


    写在前面:

    0.eclipse 工具下 Tomcat 部署 Java SSM框架的Maven项目的登录功能。(前提:ssm配置已完成,Tomcat部署已完成,java环境已配置)

    1.数据库准备(mysql)

    (第8步应该在第一步完成!!!注意,由于在下一时疏忽,刚想起来才写到了最后,读者可以先看最后,创建bean)

    2.登录界面的代码(前端代码)

    3.Controller层

    4.Service层

    5.ServiceImpl层

    6.Dao层

    7.可以忽略。。。

    8.bean:  User  和  AJAXResult

    以下是AJAX的POST方法传值

    1.数据库准备(mysql)

    CREATE TABLE `user` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(15) NOT NULL,
      `userpswd` varchar(20) DEFAULT NULL,
      `loginacct` varchar(20) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8
    

    建表后如图所示

    我添加了俩条数据(其实一条就好了。。。不影响)

    2.登录界面的代码(前端代码)

    <form id="loginForm" action="doLogin" method="post" class="form-signin" role="form">
            <h2 class="form-signin-heading"><i class="glyphicon glyphicon-user"></i> 用户登录</h2>
    		  <div class="form-group has-success has-feedback">
    			<input type="text" class="form-control" id="loginacct" name="loginacct" placeholder="请输入登录账号" autofocus>
    			<span class="glyphicon glyphicon-user form-control-feedback"></span>
    		  </div>
    		  <div class="form-group has-success has-feedback">
    			<input type="text" class="form-control" id="userpswd" name="userpswd" placeholder="请输入登录密码" style="margin-top:10px;">
    			<span class="glyphicon glyphicon-lock form-control-feedback"></span>
    		  </div>
    		  <div class="form-group has-success has-feedback">
    			<select class="form-control" >
                    <option value="member">会员</option>
                    <option value="user">管理</option>
                </select>
    		  </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="remember-me"> 记住我
              </label>
              <br>
              <label>
                忘记密码
              </label>
              <label style="float:right">
                <a href="reg.html">我要注册</a>
              </label>
            </div>
            <a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登录</a>
          </form>
    <script src="jquery/jquery-2.1.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="layer/layer.js"></script>
        <script>
        while ("${param.errorMsg}"!=''){
        	layer.msg("${param.errorMsg}",{time:2000, icon:5,shift:6},function(){})
            break;
        }
        function dologin(){
        	//非空检验
        	var loginacct=$("#loginacct").val();
        	if(loginacct==''){
        		layer.msg("账号不能为空",{time:2000, icon:5,shift:6},function(){})
        		return ;
        	}
        	var userpswd=$("#userpswd").val();
        	if(userpswd==''){
        		
        		layer.msg("密码不能为空,请输入",{time:2000, icon:5,shift:6},function(){})
        		return;
        	}   
     		//1.提交表单
     		/* $("#loginForm").submit(); */
     		
     		//2.AJAX提交数据
     		var loadingIndex=null;
     		$.ajax({
     			type : "POST",
     			url  : "doAJAXLogin",
     			data : {
     				"loginacct" : loginacct,
     				"userpswd"  : userpswd
     			},
     			//加载显示
     			beforeSend : function(){
     				loadingIndex=layer.msg('玩命登录中...',{icon: 16});
     			},
     			success : function(result){
     				layer.close(loadingIndex);
     				if(result.success){
     					window.location.href="main";
     				}else{
     		    		layer.msg("登录账号或密码不正确,请重新输入",{time:2000, icon:5,shift:6},function(){})
    
     				}
     			}
     		});
     		
        }
       
        </script>

     

    前端代码用到了一个叫layer的东西,,,可以把弹出框写的好看一点

    比如:

    我们谷歌浏览器的弹出框

    而用了layer后的弹出框

    显然,用了layer后美观一点哈哈哈哈

    3.Controller层

    @Controller
    public class DispatcherController {
    	@Autowired
    	private UserService userService;
    	
    	//跳转到登录页面
    	@RequestMapping("/login")
    	public String login() {
    		return "login";
    	}
    	//跳转到主页面
    	@RequestMapping("/main")
    	public String main() {
    		return "main";
    	}
    	//表单方法登录
    	@RequestMapping("/doLogin")
    	public String doLogin(User user, Model model) throws Exception{
    		User dbUser = userService.query4Login(user);
    		//判断用户信息是否存在
    		if(dbUser != null) {
    			return "main";
    		} else {
    			//登录失败,提示信息
    			String errorMsg="登录账号或密码不正确";
    			model.addAttribute("errorMsg", errorMsg);
    			return "redirect:login";
    		}
    	}
    
    //AJAX方法 POST提交登录
    	
    	@ResponseBody
    	@RequestMapping("/doAJAXLogin")
    	public Object doAJAXLogin(User user) {
    		AJAXResult result=new AJAXResult();
    		User dbUser = userService.query4Login(user);
    		if(dbUser != null) {
    			result.setSuccess(true);
    		} else {
    			//登录失败,提示信息
    			result.setSuccess(false);
    		}
    		return result;
    	}
    }

     

    4.Service层

    public interface UserService {
    
    	User query4Login(User user);
    
    }
    

     

    5.ServiceImpl层

    @Service
    public class UserServiceImpl implements UserService{
    
    	@Autowired
    	private UserDao userDao;
    
    
    	public User query4Login(User user) {
    		// TODO Auto-generated method stub
    		return userDao.query4Login(user);
    	}
    }

     

    6.Dao层

    public interface UserDao {
    
    
    	@Select("select * from user where loginacct=#{loginacct} and userpswd=#{userpswd}")
    	User query4Login(User user);
    
    	
    }
    

    7.博客内容本来是打算写的简单一点,自己回顾的时候可以看得懂,但是想了想还是写的详细一点,万一有别人看呢,嗯  如果哪里有问题可以留言,有时间我会回答的....

    如果哪里有bug可以留言,我修改

    哦哦哦。。。差点忘了

    很关键,还有俩个bean没有创建

     

    8.bean:  User  和  AJAXResult

    public class User {
    
    	private Integer id;
    	private String username;
    	private String loginacct;
    	private String userpswd;
    	
    	
    	public String getUserpswd() {
    		return userpswd;
    	}
    	public void setUserpswd(String userpswd) {
    		this.userpswd = userpswd;
    	}
    	public String getLoginacct() {
    		return loginacct;
    	}
    	public void setLoginacct(String loginacct) {
    		this.loginacct = loginacct;
    	}
    	public Integer getId() {
    		return id;
    	}
    	public void setId(Integer id) {
    		this.id = id;
    	}
    	public String getUsername() {
    		return username;
    	}
    	public void setUsername(String username) {
    		this.username = username;
    	}
    	
    }
    

     

    public class AJAXResult {
    
    	private boolean success;
    
    	public boolean isSuccess() {
    		return success;
    	}
    
    	public void setSuccess(boolean success) {
    		this.success = success;
    	}
    }
    

     

    好了,到此一个ssm框架下的maven项目中的AJAX传值就ojbk了,加油!!!(无bug,不人生)

     

     

     

    展开全文
  • 前后台数据交互,方便纯前端程序员了解后台服务器处理
  • Extjs_前后台数据交互[归类].pdf
  • web前后台数据交互的四种方式(转)

    千次阅读 2018-11-22 00:26:27
    1.利用cookie对象  ...(1)后台代码 1.利用cookie对象  Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。...

    1.利用cookie对象 

    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

    (1)后台代码

    1.利用cookie对象 

    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

    (1)后台代码

    1

    2

    Cookie cookie=new Cookie("name""hello"); 

    response.addCookie(cookie);

     

    (2)前台代码

     

    1

    2

    3

    4

    5

    6

    Cookie[] cookies=request.getCookies(); 

    for(int i=0;i<cookies.length;i++){ 

            if(cookies[i].getName().toString().equals("name")){ 

                out.print(cookies[i].getValue()); 

            

    }

    2.利用session对象

    session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页,服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时,仍处于同一个session中。

     

    (1)后台代码

     

    1

    2

    3

    request.getSession().setAttribute("name", name); 

    request.getSession().setMaxInactiveInterval(2); 

    response.sendRedirect("welcome.jsp"); 

      

    (2)前台代码(jsp页面)

    1

    Object user=request.getSession().getAttribute("name");

      

    3.利用request重定向,设置setAttribute

     

    (1)后台代码

     

    1

    2

    request.setAttribute("name""cute"); 

    request.getRequestDispatcher("welcome.jsp").forward(request, response);  //网址不会改变

     

    PS:如果后台使用的转发代码为 response.sendRedirect("welcome.jsp");  //网址变为welcome.jsp

    则request设置的参数无效,因为已经切换到另一个请求了,request参数的有效期为本次请求。

    (2)前台代码

     

    1

    String name=request.getAttribute("name").toString(); 

     

    4.利用Ajax进行异步数据请求(得到的数据可以以json或xml格式返回,便于处理)

    (1)后台代码案例(运用servlet传输数据)

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    public class TestServlet extends HttpServlet { 

       

        /**

         * Constructor of the object.

         */ 

        public TestServlet() { 

            super(); 

        

       

        public void doGet(HttpServletRequest request, HttpServletResponse response) 

                throws ServletException, IOException { 

            doPost(request, response); 

        

       

        public void doPost(HttpServletRequest request, HttpServletResponse response) 

                throws ServletException, IOException { 

       

            response.setContentType("text/html"); 

            PrintWriter out = response.getWriter(); 

            String data="[{\"name\":\"apple\",\"price\":23},{\"name\":\"banana\",\"price\":12},{\"name\":\"orange\",\"price\":8}]"

            out.write(data); 

            out.flush(); 

            out.close(); 

        

       

        /**

         * Initialization of the servlet. <br>

         *

         * @throws ServletException if an error occurs

         */ 

        public void init() throws ServletException { 

            // Put your code here 

        

       

      


    2.前台js请求处理数据代码

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    function createXMLHttpRequest(){ 

        var xmlrequest; 

        if(window.XMLHttpRequest){ 

            xmlrequest=new XMLHttpRequest(); 

        }else if(window.ActiveXObject){ 

            try

                xmlrequest=new ActiveXObject("Msxm12.XMLHTTP"); 

            }catch(e){ 

                try

                    xmlrequest=new ActiveXObject("Microsoft.XMLHTTP"); 

                }catch(e){ 

                    xmlrequest=""

                

            

        

        return xmlrequest; 

    //获取数据的函数 

    function change(){ 

        var xmlrequest=createXMLHttpRequest(); 

        xmlrequest.open("POST","TestServlet",true); 

        xmlrequest.onreadystatechange=function(){ 

            if(xmlrequest.readyState==4&&xmlrequest.status==200){ 

                var data=JSON.parse(xmlrequest.responseText); 

                var content="<table border=1>"

                for(var i=0;i<data.length;i++){ 

                    content+="<tr>"

                    for(o in data[i]){ 

                        content+="<td>"+data[i][o]+"</td>"

                    

                    content+="</tr>"

                

                content+="</table>"

                document.getElementById("test").innerHTML=content; 

            

        }; 

        xmlrequest.send(); 

      

     

    总结:在用户访问网站整个生命周期中都会用到的数据用session来存储,例如用户名,登录状态,购物车信息

               显示在网页上的信息数据大多通过 request或Ajax方式获取

     

     

    (2)前台代码

     

    1

    2

    3

    4

    5

    6

    Cookie[] cookies=request.getCookies(); 

    for(int i=0;i<cookies.length;i++){ 

            if(cookies[i].getName().toString().equals("name")){ 

                out.print(cookies[i].getValue()); 

            

    }

    2.利用session对象

    session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页,服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时,仍处于同一个session中。

     

    (1)后台代码

     

    1

    2

    3

    request.getSession().setAttribute("name", name); 

    request.getSession().setMaxInactiveInterval(2); 

    response.sendRedirect("welcome.jsp"); 

      

    (2)前台代码(jsp页面)

    1

    Object user=request.getSession().getAttribute("name");

      

    3.利用request重定向,设置setAttribute

     

    (1)后台代码

     

    1

    2

    request.setAttribute("name""cute"); 

    request.getRequestDispatcher("welcome.jsp").forward(request, response);  //网址不会改变

     

    PS:如果后台使用的转发代码为 response.sendRedirect("welcome.jsp");  //网址变为welcome.jsp

    则request设置的参数无效,因为已经切换到另一个请求了,request参数的有效期为本次请求。

    (2)前台代码

     

    1

    String name=request.getAttribute("name").toString(); 

     

    4.利用Ajax进行异步数据请求(得到的数据可以以json或xml格式返回,便于处理)

    (1)后台代码案例(运用servlet传输数据)

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    public class TestServlet extends HttpServlet { 

       

        /**

         * Constructor of the object.

         */ 

        public TestServlet() { 

            super(); 

        

       

        public void doGet(HttpServletRequest request, HttpServletResponse response) 

                throws ServletException, IOException { 

            doPost(request, response); 

        

       

        public void doPost(HttpServletRequest request, HttpServletResponse response) 

                throws ServletException, IOException { 

       

            response.setContentType("text/html"); 

            PrintWriter out = response.getWriter(); 

            String data="[{\"name\":\"apple\",\"price\":23},{\"name\":\"banana\",\"price\":12},{\"name\":\"orange\",\"price\":8}]"

            out.write(data); 

            out.flush(); 

            out.close(); 

        

       

        /**

         * Initialization of the servlet. <br>

         *

         * @throws ServletException if an error occurs

         */ 

        public void init() throws ServletException { 

            // Put your code here 

        

       

      


    2.前台js请求处理数据代码

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    function createXMLHttpRequest(){ 

        var xmlrequest; 

        if(window.XMLHttpRequest){ 

            xmlrequest=new XMLHttpRequest(); 

        }else if(window.ActiveXObject){ 

            try

                xmlrequest=new ActiveXObject("Msxm12.XMLHTTP"); 

            }catch(e){ 

                try

                    xmlrequest=new ActiveXObject("Microsoft.XMLHTTP"); 

                }catch(e){ 

                    xmlrequest=""

                

            

        

        return xmlrequest; 

    //获取数据的函数 

    function change(){ 

        var xmlrequest=createXMLHttpRequest(); 

        xmlrequest.open("POST","TestServlet",true); 

        xmlrequest.onreadystatechange=function(){ 

            if(xmlrequest.readyState==4&&xmlrequest.status==200){ 

                var data=JSON.parse(xmlrequest.responseText); 

                var content="<table border=1>"

                for(var i=0;i<data.length;i++){ 

                    content+="<tr>"

                    for(o in data[i]){ 

                        content+="<td>"+data[i][o]+"</td>"

                    

                    content+="</tr>"

                

                content+="</table>"

                document.getElementById("test").innerHTML=content; 

            

        }; 

        xmlrequest.send(); 

      

     

    总结:在用户访问网站整个生命周期中都会用到的数据用session来存储,例如用户名,登录状态,购物车信息

               显示在网页上的信息数据大多通过 request或Ajax方式获取

    展开全文
  • web前后台数据交互

    千次阅读 2017-08-31 17:07:56
    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。 (1)后台代码 1 2 Cookie cookie...

    1.利用cookie对象 

    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

    (1)后台代码

    1
    2
    Cookie cookie= new Cookie( "name" , "hello" ); 
    response.addCookie(cookie);

     

    (2)前台代码

     

    1
    2
    3
    4
    5
    6
    Cookie[] cookies=request.getCookies(); 
    for ( int i= 0 ;i<cookies.length;i++){ 
             if (cookies[i].getName().toString().equals( "name" )){ 
                 out.print(cookies[i].getValue()); 
            
    }

    2.利用session对象

    session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页,服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时,仍处于同一个session中。

     

    (1)后台代码

     

    1
    2
    3
    request.getSession().setAttribute( "name" , name); 
    request.getSession().setMaxInactiveInterval( 2 ); 
    response.sendRedirect( "welcome.jsp" ); 

      

    (2)前台代码(jsp页面)

    1
    Object user=request.getSession().getAttribute( "name" );

      

    3.利用request重定向,设置setAttribute

     

    (1)后台代码

     

    1
    2
    request.setAttribute( "name" , "cute" ); 
    request.getRequestDispatcher( "welcome.jsp" ).forward(request, response);  //网址不会改变

     

    PS:如果后台使用的转发代码为 response.sendRedirect("welcome.jsp");  //网址变为welcome.jsp

    则request设置的参数无效,因为已经切换到另一个请求了,request参数的有效期为本次请求。

    (2)前台代码

     

    1
    String name=request.getAttribute( "name" ).toString(); 

     

    4.利用Ajax进行异步数据请求(得到的数据可以以json或xml格式返回,便于处理)

    (1)后台代码案例(运用servlet传输数据)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    public class TestServlet extends HttpServlet { 
       
         /**
          * Constructor of the object.
          */ 
         public TestServlet() { 
             super (); 
        
       
         public void doGet(HttpServletRequest request, HttpServletResponse response) 
                 throws ServletException, IOException { 
             doPost(request, response); 
        
       
         public void doPost(HttpServletRequest request, HttpServletResponse response) 
                 throws ServletException, IOException { 
       
             response.setContentType( "text/html" ); 
             PrintWriter out = response.getWriter(); 
             String data= "[{\"name\":\"apple\",\"price\":23},{\"name\":\"banana\",\"price\":12},{\"name\":\"orange\",\"price\":8}]"
             out.write(data); 
             out.flush(); 
             out.close(); 
        
       
         /**
          * Initialization of the servlet. <br>
          *
          * @throws ServletException if an error occurs
          */ 
         public void init() throws ServletException { 
             // Put your code here 
        
       

      


    2.前台js请求处理数据代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    function createXMLHttpRequest(){ 
         var xmlrequest; 
         if (window.XMLHttpRequest){ 
             xmlrequest= new XMLHttpRequest(); 
         } else if (window.ActiveXObject){ 
             try
                 xmlrequest= new ActiveXObject( "Msxm12.XMLHTTP" ); 
             } catch (e){ 
                 try
                     xmlrequest= new ActiveXObject( "Microsoft.XMLHTTP" ); 
                 } catch (e){ 
                     xmlrequest= ""
                
            
        
         return xmlrequest; 
    //获取数据的函数 
    function change(){ 
         var xmlrequest=createXMLHttpRequest(); 
         xmlrequest.open( "POST" , "TestServlet" , true ); 
         xmlrequest.onreadystatechange=function(){ 
             if (xmlrequest.readyState== 4 &&xmlrequest.status== 200 ){ 
                 var data=JSON.parse(xmlrequest.responseText); 
                 var content= "<table border=1>"
                 for (var i= 0 ;i<data.length;i++){ 
                     content+= "<tr>"
                     for (o in data[i]){ 
                         content+= "<td>" +data[i][o]+ "</td>"
                    
                     content+= "</tr>"
                
                 content+= "</table>"
                 document.getElementById( "test" ).innerHTML=content; 
            
         }; 
         xmlrequest.send(); 

      

     

    总结:在用户访问网站整个生命周期中都会用到的数据用session来存储,例如用户名,登录状态,购物车信息

               显示在网页上的信息数据大多通过 request或Ajax方式获取


    ====================================================================================================================================

    ssm框架下,js页面通过json将数据发送到后台,后台处理之后,再将数据发送到前台。

    在前台,要将用户名和邮箱发送到后台,先将用户名和和邮箱转成json形式的数据,在通过ajax发送到后台,其中url为后台要处理数据的地址。前台主要代码如下,其中User是一个实体类,有id,name,email,password等属性。

    1. var user_json = {        
    2.                 "user_name": user_name,  
    3.                 "user_mail":user_mail  
    4.             }      
    5.   
    6.  //js对象转换成JSON字符串  
    7.             var jason_str = JSON.stringify(user_json);  
    8.   
    9.                 //Ajax发送数据给后台  
    10.                 $.ajax({  
    11.                     url :"/MyApplication/user/checkUserLogin",   
    12.                     cache : true,  
    13.                     type : "post",  
    14.                     datatype : "json",  
    15.                     contentType : "application/json; charset=utf-8",  
    16.                     data : jason_str,  
    17.                     success : function (data){  
    18.                         //返回空值  
    19.                         if(data==null){  
    20.                             alert("不存在该用户!");  
    21.                             window.location.href = "sighIn.html";  
    22.                         } else{  //存在该用户  
    23.                             if(password == data.user_password){  //密码正确  
    24.                                 window.location.href = "index.html?user_name=" + data.user_name;  
    25.                             }else{  //密码不正确  
    26.                                 alert("密码错误!");  
    27.                                 window.location.href = "sighIn.html";  
    28.                             }  
    29.                               
    30.                         }  
    31.                     }  
    32.                       
    33.                 });  

    后台只要代码如下(在controller层编写)

    1. @RequestMapping(value = "/checkUserLogin")  
    2.     public @ResponseBody User checkUserLogin(@RequestBody User user){  
    3.         if (user.getUser_name() != null) {  
    4.             user = userService.findByName(user.getUser_name());  
    5.         } else if (user.getUser_mail() != null) {  
    6.             user = userService.findByMail(user.getUser_mail());  
    7.         }  
    8.         return user;  
    9.     }  
    @RequestBody是将json形式的数据转化成User类型的数据,@ResponseBody是将User类型的数据转成json发送到前端。


    ====================================================================================================================================

    去年开始接触java web项目开发,在项目开发过程中难免会遇到前台jsp页面获得的数据传到后台controller层去处理,对于常用的三种方式进行了以下总结:

    1.Form表单提交

    jsp页面中可以嵌入form表单,主要有两个属性,action和method。action的内容是表单要提交到后台controller的某个请求。method是表单提交方式:主要有get和post两种提交方式,一般的表单提交数据会用到post方式,考虑到数据安全性问题。下面是我做的一个小例子,有用户名和密码两个字段

    jsp页面form表单

    后台处理请求代码:

    后台请求方法

    2.Ajax = Asynchronous JavaScript and XML

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行刷新。很常见的例子在某些网站注册过程中要求用户名不能重复,所以在避免数据已经提交到后台去数据库校验该用户是否存的的情况下,ajax可以实现异步刷新,在文本框失去焦点后就去访问后台数据库判断该用户是否已经存在。

    jquery中的ajax

    下面简单介绍下ajax请求里面的主要几个参数:

    url:一般为String类型的参数,发送请求的地址。type:一般String类型的参数,请求方式主要用(post或get)默认为get。data:一般为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式dataType:预期服务器返回的数据类型success:要求为Function类型的参数,请求成功后调用的回调函数,一般有两个参数。

    (1)由服务器返回,并根据dataType参数进行处理后的数据。

    (2)描述状态的字符串。

    function(data, textStatus){

    //data可能是xmlDoc、jsonObj、html、text等等

    }

    error:请求失败时被调用的函数

    3. a标签中src属性

    常用的a便签中的src属性也可以发送请求到后台,后台有相应的处理方法即可。

    a便签

    后台处理方法

    以上三种方式是我总结的工作中比较常用的几种方法,尤其是form表单提交数据。初次发稿还有许多不足的地方,欢迎大家继续补充和提出意见哈。


    ====================================================================================================================================



    展开全文
  • 一定要跟后台确认入参的数据类型,最近在写小程序遇到的一个问题,代码如下,自认为这样传没问题,都是从其它写过的项目拷贝过来的,改改地址,入参就行,结果导致出现了问题,调用接口一直是404,后来才发现前端传...
  • JSP前后台数据交互

    千次阅读 2017-10-24 23:17:58
    1.一般方法:在页面加载时载入数据 首先,新建一个包,在包内创建一个类,类实现接口Servlet-javax.servlet 然后,在web.xml文件里配置如下 web-app xmlns:xsi=...
  • 前后台交互案例

    2017-11-08 09:44:50
    前端用jquery的ajax方法发送请求到C#后台后台收到请求后返回请求结果案例
  • 基于SSM框架的web开发——ajax实现前后台数据交互

    千次阅读 多人点赞 2018-03-17 22:36:48
    前台向后台传输数据1丶用传统的form表单提交,举个栗子:&lt;form method="post" action="login.do"&gt; &lt;input type="text" name="username"&gt;&...
  • web前后台数据交互的4种方式

    千次阅读 2017-10-20 13:51:54
    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。 (1)后台代码 [java] view plain copy ...
  • 下面小编就为大家分享一篇Layui前后台交互数据获取java实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • jQuery(Ajax+json前后台数据交互

    万次阅读 2018-09-21 21:35:05
    jackson Jackson是一个简单基于Java应用库,Jackson可以轻松的将Java对象转换成json对象 和xml文档,同样也可以将json、xml转换成Java对象 核心代码: ObjectMapper mapper =...//获取源数据的行数 int co...
  • 利用AjaxPro2实现前后台数据实时交互,里面bin目录包含AjaxPro.2.dll,web.confing文件包含在windows server 2008+IIS 7.0 下如何设置,才能正常使用AjaxPro2
  • web前后台数据交互的几种方式

    万次阅读 2016-12-16 09:32:17
    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。 (1)后台代码 [java] view plain copy ...
  • 一 、基于BaseServlet (BaseServlet extends HttpServlet),如果BaseServlet中不设置任何编码格式,在其子类QueryCustomer (QueryCustomer extends BaseServlet)中获取到前端传回来的数据乱码??? 原因是tomcat...
  • 前后台数据交互 页面权限ass_check(‘YHTJ’) 后台通过render方法渲染出前台页面 前台通过input获取输入值 把输入值通过ajax发送给后台 后台根据ajax传递的值,操作数据库 把操作数据库的结果值,发送给前台 前台把...
  • Ajax、jquery实现前后台数据交互

    千次阅读 2016-04-10 19:27:08
    //‘/_relay_single’是路由函数,用于前后台连接,后台需要有此函数来完成对前端传输数据的操作,data是后台返回的数据 function single_relay( n ){ $.getJSON( $SCRIPT_ROOT + '/_relay_single', { relay_num: ...
  • 有那个大神有.net的AJAX前后台数据交互案例啊,能不能发给我一份啊,我没有c币啊。扣扣号(1154031651)
  • 前后台数据交互

    千次阅读 2016-10-18 22:18:01
    前后台数据交互先记录一点儿关于前后台数据的理解,算是新手的成长过程。java Web的前后台是很有意思的一个东西。聊一聊我知道的历史,据说以前java是不分前后台的---洪荒时代。其实没啥,就是把HTML和java代码写在...
  • Springboot项目前后台数据交互

    千次阅读 2020-06-10 13:50:41
    1.2 后台 controller通过@RequestParam接收前台参数,可以看到点击登录后,url后直接拼接了参数,如果传参比较少的话用这种方法还好,如果参数较多就不适合了,,我们填入数据点击登录如图: 1.3 总结 可以看到是...
  • 关于小程序的前后台数据交互

    千次阅读 2020-07-03 17:04:22
    小程序端的数据怎么传递到后台 1.首先需要建立接口,一般把接口放在公共js里面。比如我是在utils文件里面新建一个uri.js文件。写入接口格式: module.exports = { ORDERSLIST: "orders/getList", ORDERSADD: ...
  • asp.net 前后台数据交互方式(转)

    千次阅读 2019-04-12 22:30:00
    一、前台直接输出后台传递的数据 后台代码: // .aspx.cs public string value = string.Empty; public StringBuilder list = new StringBuilder(); protected void Page_Load...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 138,969
精华内容 55,587
关键字:

前后台数据交互