精华内容
下载资源
问答
  • SpringBoot 前后端json数据交互

    万次阅读 多人点赞 2018-04-05 15:28:05
    三、最终选择交互方式 一、参考文献 原生Ajax与JQuery Ajax SpringMVC接受JSON参数详解及常见错误总结 提交方式为 POST 时, JQuery Ajax 以 application/x-www-form-urlencoded 上传 JSON对象 , 后端用 ...

    目录

    一、参考文献

    二、勇敢尝试

    • 前端js发送ajax请求( application/x-www-form-urlencoded

             var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
                /*
                    Jquery默认Content-Type为application/x-www-form-urlencoded类型
                 */
                $.ajax({
                    type: 'POST',
                    url: "/login",
                    dataType: "json",
                    data: JSON.stringify(jsonObj),
                    success: function(data) {
                        console.log(data)
                    },
                    error: function() {
                        console.log("fucking error")
                    }
                });

    • 后端Servlet接受参数。前端报 200,后端报 返回值都是null

      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(HttpServletRequest request){
            System.err.println(request.getParameter("openid"));
            System.err.println(request.getParameter("username"));
            System.err.println(request.getParameter("password"));
      }
      
    • 后端改 @RequestParam 接受参数。前端报 404,后端报 Required String parameter ‘username’ is not present

      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(@RequestParam("username") String username,
                          @RequestParam("password") String password,
                          @RequestParam("openid") String openid){
            System.err.println(username);
            System.err.println(password);
            System.err.println(openid);
        }
    • 后端改 @RequestBody 接受参数。前端报 415,后端报 Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported

      Http status 415 Unsupported Media Type

      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(@RequestBody Map<String,Object> map){
            System.err.println(map.get("username"));
            System.err.println(map.get("password"));
            System.err.println(map.get("openid"));
        }
    • 前端加 contentType : “application/json”。前端报 200,后端 能接受到参数

          $.ajax({
                    type: 'POST',
                    url: "/login",
                    dataType: "json",
                    data: JSON.stringify(jsonObj),
                    contentType : "application/json",
                    success: function(data) {
                        console.log(data)
                    },
                    error: function() {
                        console.log("fucking error")
                    }
                });
      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(@RequestBody Map<String,Object> map){
            System.err.println(map.get("username"));
            System.err.println(map.get("password"));
            System.err.println(map.get("openid"));
      }
      }
    • 有时候,我想在后端使用对象来获取参数。前端报 200,后端 也ok

      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(@RequestBody Form form){
            System.err.println(form);
      }
      }
      public class Form {
        private String openid;
        private String username;
        private String password;
      
        public String getOpenid() {
            return openid;
        }
      
        public void setOpenid(String openid) {
            this.openid = openid;
        }
      
        public String getUsername() {
            return username;
        }
      
        public void setUsername(String username) {
            this.username = username;
        }
      
        public String getPassword() {
            return password;
        }
      
        public void setPassword(String password) {
            this.password = password;
        }
      
        @Override
        public String toString() {
            return "Form{" +
                    "openid='" + openid + '\'' +
                    ", username='" + username + '\'' +
                    ", password='" + password + '\'' +
                    '}';
        }
      }

    三、最终选择交互方式

    • 前端 application/json,上传 josn字符串, 后端 使用对象 或者 Map

    • 前端代码

             var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
                /*
                    Jquery默认Content-Type为application/x-www-form-urlencoded类型
                 */
                $.ajax({
                    type: 'POST',
                    url: "/login",
                    dataType: "json",
                    data: JSON.stringify(jsonObj),
                    contentType : "application/json",
                    success: function(data) {
                        console.log(data)
                    },
                    error: function() {
                        console.log("fucking error")
                    }
                });
    • 后端代码1

      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(@RequestBody Form form){
            System.err.println(form);
      }
      }

    • 后端代码2

      @Controller
      public class LoginController {
        @PostMapping("/login")
        public void login(@RequestBody Map<String,Object> map){
            System.err.println(map.get("username"));
            System.err.println(map.get("password"));
            System.err.println(map.get("openid"));
      }
      }

    展开全文
  • 所谓的前后端只是从代码被执行的位置来区分的,前端代码在用户面前被执行,后端代码在遥远的服务器上被执行。但是,无论前端或后端代码,都是存放在服务器上的,只是当浏览器请求的时候,从服务器发送过去而已。 ...

    前言

    使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程。

    第一步:浏览器向DNS服务器发起DNS请求,DNS服务器解析域名后返回域名对应的网站服务器IP地址

    第二步:浏览器获取IP地址后向网络服务器发送一个HTTP请求

    第三步:网络服务器解析浏览器的请求后从数据库获取资源,将生成的html文件封装至HTTP 响应包中,返回至浏览器解析

    下图抓包显示了访问“www.baidu.com”时,DNS请求和响应、HTTP请求和响应

    1428c4867647742c2a1741b93bf03eba.png

    第四步:浏览器解析HTTP 响应后,下载html文件,继而根据文件内包含的外部引用文件、图片或者多媒体文件等逐步下载,最终将获取到的全部文件渲染成完整的网站页面。

    下图显示GET请求到HTML文件后继续请求了多个JS、CSS文件

    3079c3692edbebf8dec870eb9af419a9.png

    前端与后端

    浏览器显示的网页即为web前端界面,提供用户与网站进行交互的可视化接口,而web后端服务主要指在服务器中执行的逻辑运算和数据处理,它为前端提供着访问服务。所谓的前后端只是从代码被执行的位置来区分的,前端代码在用户面前被执行,后端代码在遥远的服务器上被执行。但是,无论前端或后端代码,都是存放在服务器上的,只是当浏览器请求的时候,从服务器发送过去而已。

    a432c46829d8f591265e3da3364c7a44.png

    AJAX介绍

    在上述web应用工作的原理中,我们通过HTTP协议访问一个在服务端存在的文件,服务器可以找到该文件并将其内容封装到HTTP请求中,以消息体的形式返回给客户端。不过这种方式只能访问静态的页面,无法与后端数据库进行交互。既然用户需要通过web前端实时与后端数据库进行交互,那么网页也需要动态的更新,如果每次更新一个数据都通过重新获取Html文件的方式来实现势必会导致网络负荷加重,页面加载迟缓。而Ajax技术可以很好的解决这个问题。

    8ed3871bf504485325d986d0b9258d08.png

    Ajax即异步JavaScript和XML,是一种创建交互式网页的技术,可以不重新加载整个网页的情况下更新部分网页。目前jQuery库提供多个与AJAX相关的方法。通过 jQuery AJAX方法,能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON,同时能够把这些外部数据直接载入网页被选元素中。

    cffb5f971947a137bd7d04ad3402c1a6.png

    作为web开发人员广泛采用的JavaScript封装库之一的jQuery库,它可以极大地简化我们的JavaScript编程,缓解浏览器之间不兼容的影响,要知道在不同浏览器中进行web网页的兼容性测试也是一个不小的工作量。我们可以通过一个简单的例子发现jQuery库的优势所在:

    $("p.neat").addClass("ohmy").show("slow");

    通过以上简短的代码,开发者可以遍历“neat”类中所有的

    元素,然后向其增加“ohmy”类,同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型,无需编写循环代码,无需编写复杂的动画函数,仅仅通过一行代码就能实现上述效果。jQuery的口号“最少的代码做最多的事情”果真名副其实,它把JavaScript带到了一个更高的层次。

    JSON格式介绍

    对于交互的数据格式,这里采用JSON(JavaScript Object Notation),它是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据。JSON键值的层次结构简洁清晰,易于阅读和编写,使得 JSON 成为理想的数据交换语言。举个例子来理解JSON数据格式:

    {//JSON键/值对

    “'wJsona'”:”kkk”

    “'wjsonb'”:”12”

    “'wjsonc”:”80”

    }

    代码实现

    下面介绍前端jQuery .ajax()请求JSON数据的方法,代码如下:

    function useTestFun() {

    $.ajax({

    url: "/Usedefine",//获取数据的URL

    data:JSON.stringify({

    'wJsona':"kkk",

    'wjsonb':12,

    'wjsonc':80,

    }),

    type: "POST",//HTTP请求方法

    dataType:'JSON',//获取数据执行方式

    success:function(data){

    if(data.status == 'True'){//传入为JSON对象格式

    alert('连接成功');

    }

    else{

    $("#labletip").show();

    }

    },

    error:function(err){

    alert('连接失败');

    }

    });

    }

    在数据传输过程中,JSON是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以JSON对象和JSON字符串之间的相互转换是关键,可以使用JSON.stringify()将JSON对象转化为JSON字符串,使用JSON.parse()将JSON字符串转换为JSON对象。

    JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }';

    JSON对象: var str2 = { "name": "cxh", "sex": "man" };

    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

    var last = obj.toJSONString(); //将JSON对象转化为JSON字符

    var last = JSON.stringify(obj); //将JSON对象转化为JSON字符

    如下所示为HTTP协议中JSON数据的传输格式,后端服务器可使用第三方JSON库来处理JSON数据,返回JSON数据时对HTTP协议的Content-Type字段设置为“application/json”。

    e9aa58cf2a53c9bdd3b7882b55d2f97e.png

    展开全文
  • 在web 中经常会遇到 前后端 数据交互的问题,这个时候就离不开ajax 。 ajax中经常用到的数据格式是json,可以防止出现转义字符,乱码等问题。 本文简单的展示一个demo,用ajax 来前后端 json格式 数据 进行交互。 ...

    在web 中经常会遇到 前后端 数据交互的问题,这个时候就离不开ajax 。
    ajax中经常用到的数据格式是json,可以防止出现转义字符,乱码等问题。

    本文简单的展示一个demo,用ajax 来前后端 json格式 数据 进行交互。

    前端 js 代码

            $('#cc').click(function () {
                data_dict = {
                    'name1': 'aaaa1','name2': 'aaaa2','name3': 'aaaa3','name4': 'aaaa4'//要发送的字典,在JavaScript里被定义为对象
                }; //传输数据
                $.ajax({
                    type: 'POST',
                    url: '/send',
                    data: JSON.stringify(data_dict),//将对象打包成json的字符串发送,对应下面也要将字符串解码成字典
                    contentType: 'application/json;charset=UTF-8',//编码格式
                    dataType: 'json',
                    success: function (data) {
                        console.log(typeof(data["calc"]));//打印为字符串
                        console.log(data["calc"]);//打印为对象object
                    }
                })
            })
    

    后端 flask 处理逻辑

    from flask import Flask,render_template, request, url_for, jsonify
    import os
    import json
    import sys
    import subprocess
    
    app = Flask(__name__)//与下面的  app.run()对应
    app.config['SECRET_KEY'] = "dfdfdffdad"
    
    @app.route('/')
    def index():
        return render_template('index.html')
    
    @app.route('/send', methods=['POST'])
    def upload_file():
        a=request.get_data()//得到JavaScript发送的字符串流
        print(type(a))//bytes
        s1 = str(a, encoding='utf-8')//解码为string
        print(type(s1))
        print(s1)
        user_dict1 = json.loads(s1)//将string变成dict
        for key in user_dict1.keys():
            print(key,user_dict1[key])
        user_dict = json.loads(a)//将bytes变成dict
        
        for key in user_dict.keys():
            print(key,user_dict[key])
        dict4={"calc":"success"}
        return jsonify(dict4)
    
    if __name__ == '__main__'://flask实例化,上面相当于类的子函数
        app.run()
    

    前台接受成功的话,会在web 控制台 输出 返回的 “success”。

    展开全文
  • ssm实现ajax前后端json数据交互

    千次阅读 2018-07-12 21:54:17
    这些天在写项目的时候,一直被一个事情困扰,就是ajax和后端交互时候总是得不到json数据,自己在springboot测试却没有问题,在此记录一下有关于spring-mvc.xml的配置。当然还有源码。 首先在pom.xml中配置json...

    这些天在写项目的时候,一直被一个事情困扰,就是ajax和后端交互时候总是得不到json数据,自己在springboot测试却没有问题,在此记录一下有关于spring-mvc.xml的配置。当然还有源码。


    首先在pom.xml中配置json依赖

    <!-- 映入JSON -->
        <dependency>
          <groupId>org.codehaus.jackson</groupId>
          <artifactId>jackson-mapper-asl</artifactId>
          <version>1.9.13</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-core</artifactId>
          <version>2.8.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.8.0</version>
        </dependency>

    然后在xml配置文件中加入

    <bean id="mappingJacksonHttpMessageConverter"
              class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>text/html;charset=UTF-8</value>
                    <value>application/json;charset=UTF-8</value>
                </list>
            </property>
        </bean>
     <mvc:annotation-driven>
            <mvc:message-converters>
                <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
    
                <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                   <property name="supportedMediaTypes">
                        <list>
                            <value>text/html;charset=UTF-8</value>
                            <value>application/json;charset=UTF-8</value>
                        </list>
                    </property>
                </bean>
            </mvc:message-converters>
        </mvc:annotation-driven>
    
    
    

    在页面中一定要注意添加contentType:'application/json:这是告诉服务器,我要发什么类型的数据 。

                    var ds = {};
                    ds.boardId='${host.boardId}';
                    ds.topicId='${host.topicId}';
                    ds.userId='${user.userId}';
                    ds.postText=text;
                    ds.postType=0;
                    $.ajax({
                        type:'post',
                        url:'/postText',
                        contentType:'application/json',
                        //数据格式是json串,商品信息
                        data:JSON.stringify(ds),
                        success:function(data){//返回json结果
                            alert(data);
                            location.reload();//刷新页面
                        }
                    });
    

    最后 后台controller:

     @RequestMapping(value = "/postText", method = RequestMethod.POST)
        @ResponseBody//用来返回数据并非view
        public boolean postText(@RequestBody Post post) {//接收json并映射到post对象中
            forumService.addPost(post);
            return true;
        }
    展开全文
  • ) 一、ajax注意点:  1、原理图:(来自韩顺平ajax视频) ... 2、ajax返回数据类型:  文本,json,xml  (1)文本格式:    (2)xml:   1 <?php 2 //告诉浏览器返回的是...
  •  前端jQuery .ajax()请求JSON数据的方法: function useTestFun() { $.ajax({ url: "/Usedefine",//获取数据的URL data:JSON.stringify({ 'wJsona':"kkk", 'wjsonb':12, 'wjsonc':80, }), type: ...
  • JSON: JSON数据具有2种形式,一种是无序的key-value对的集合(对象),另一种是有序的值的集合(数组)。{string : value, ...} object{"birthday": "1996-1-1","name": "王小二","comment": "这是注释","maj...
  • 当与前端交互的过程当中,常用json数据与前端进行交互,这样想取出前端传送过来的json数据的时候,就需要用到@RequestBody这个注解。@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的...
  • 本篇文章给大家带来的内容是关于json前后端数据交互方法实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、介绍官方JSON介绍 WIKI百科。 JavaScript object notation(记号法)。JSON: JSON...
  • Web前后端Json格式交互

    千次阅读 2012-06-15 20:31:10
    最近经常用ajax与C#数据交换,同事们都用xml传输,但这个会有浏览器差异,虽然他们说解决了。...但是将数据json格式返回,绑定格式也是挺麻烦的,于是,上网查了一下。 一、简介与实例 Jayrock是一个LGPL的开源
  • 1:前端页面ajax发送数据 $(function(){ myObj = { name:"Bill Gates", age:62, city:"Seattle" }; myJSON = JSON.stringify(myObj); $.ajax({ url : "testjson.php...
  • 本篇文章给大家分享了关于json前后端数据交互方法实现的相关知识点内容,有兴趣的读者们可以参考学习下。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,403
精华内容 561
关键字:

前后端json数据交互