精华内容
下载资源
问答
  • js代码$.ajax({type : "POST",url : js_path + "/maintainAdd/add",data : JSON.stringify(madd_data.editMaintain),contentType : "application/json",dataType : "json",complete:function(msg) {layer.msg("报修...

    js代码

    $.ajax({

    type : "POST",

    url : js_path + "/maintainAdd/add",

    data : JSON.stringify(madd_data.editMaintain),

    contentType : "application/json",

    dataType : "json",

    complete:function(msg) {

    layer.msg("报修成功",{time:2000});

    layer.close(madd_data.w_c_index);

    }

    });

    Action代码

    @ResponseBody

    @RequestMapping(value = "/add",method = RequestMethod.POST)

    public void addMaintain(@RequestBody Maintain maintain){

    this.save_maintain(maintain);

    }

    注意事项:

    1、ajax中,contentType: "application/json"是必须的。dataType: "json"是表示返回值是json格式,依据返回值类型而定。

    2、data中,将json对象序列化。使用JSON.stringfy()函数或者双引号形式的字符串。

    3、调试的一个技巧,有时候json变量和实体类相对复杂时提交老是报415或者400的错误又找不到原因,可以将Action中的实体类换成JSONObject 看看能不能接收到参数,@RequestBody JSONObject requestJso,接收后在JSON系列化到实体类。有次就是因为json变量向实体类转换时发生字符向数字转换的错误。

    以上这篇通过Ajax进行Post提交Json数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • 使用Springboot接收前端Ajax发送json

    千次阅读 2020-03-04 00:44:13
    } script> ()" value="发送简单json" /> <hr /> ()" value="发送复杂json" /> body> html> 这里要注意: script标签引入js的形式必须是双标签,形如: 如果是形如 的单标签,将无法引入js。 页面提交的数据...

    1. 后端Springboot

    通过 https://start.spring.io/ 获得项目框架。在eclipse中导入下载的Maven项目。

    • Maven添加fastjson依赖包
    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <dependency>
    	<groupId>com.alibaba</groupId>
    	<artifactId>fastjson</artifactId>
    	<version>1.2.62</version>
    </dependency>
    
    • 定义Controller
    @RestController
    public class GetJsonReq {
    
    	@CrossOrigin
    	@RequestMapping(value = "/simple")
    	// json的结构和内部字段名称可以与POJO/DTO/javabean完全对应
    	public Map<String, String> getJsonBean(@RequestBody Beauty beauty) {
    		Map<String, String> result = null;
    
    		if (beauty != null) {
    			System.out.println("美女的名字:" + beauty.getName());
    			System.out.println("美女的年龄:" + beauty.getAge());
    
    			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    			System.out.println("美女出道日期:" + sdf.format(beauty.getDate()));
    
    			System.out.println("美女的收入:" + beauty.getSalary());
    
    			result = new HashMap<>();
    			result.put("code", "1");
    			result.put("msg", "ok");
    		}
    
    		return result;
    	}
    
    	@CrossOrigin
    	@RequestMapping(value = "/complex")
    	//json的结构较为复杂,不直接与POJO/DTO/javabean对应。
    	public Map<String, String> getJsonComplex(@RequestBody JSONObject param) {
    		Map<String, String> result = null;
    
    		if (param != null) {
    			JSONObject master = param.getJSONObject("master");
    			Beauty beauty = (Beauty) JSONObject.toJavaObject(master, Beauty.class);
    			System.out.println(beauty);
    
    			JSONArray mm = param.getJSONArray("MM");
    			for (int i = 0; i < mm.size(); i++) {
    				// 这里不能使用get(i),因为get(i)只会得到键值对。
    				JSONObject json = mm.getJSONObject(i);
    				Beauty bt = (Beauty) JSONObject.toJavaObject(json, Beauty.class);
    				System.out.println(bt);
    			}
    
    			result = new HashMap<>();
    			result.put("code", "1");
    			result.put("msg", "ok");
    		}
    
    		return result;
    	}
    }
    
    • POJO/DTO/JavaBean
      注意Date字段要如何处理。
    public class Beauty {
    	private String name;
    	private int age;
    	@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    	private Date date;
    	private double salary;
    
    	public Beauty() {
    
    	}
    
    	public String getName() {
    		return name;
    	}
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    	public int getAge() {
    		return age;
    	}
    
    	public void setAge(int age) {
    		this.age = age;
    	}
    
    	public Date getDate() {
    		return date;
    	}
    
    	public void setDate(Date date) {
    		this.date = date;
    	}
    
    	public double getSalary() {
    		return salary;
    	}
    
    	public void setSalary(double salary) {
    		this.salary = salary;
    	}
    
    	@Override
    	public String toString() {
    		return "Beauty [name=" + name + ", age=" + age + ", date=" + date + ", salary=" + salary + "]";
    	}
    
    }
    
    • 将JSON转为Java对象使用@RequestBody 注解;将Java对象转换为JSON使用@ResponseBody注解。

    一旦使用@ResponseBody注解返回流程将不在经过视图解析器,而是直接将数据写入到输出流中,通过response的body返回数据。如果处理请求方法返回的是 String 时@ResponseBody 注解不会进行 JSON 转换。响应的 Content-Type 为 text/plain;charset=ISO-8859-1。如果处理请求方法返回的是除了 String 类型以外的其他Object 类型时,@ResponseBody注解会进行 JSON 转换。响应的 Content-Type 为 application/json。

    响应体的字符编码需要在@RequestBody 注解中设定:

    //@RequestMapping(value = "/addUsers",produces = "text/plain;charset=utf-8") 返回String
    //@RequestMapping(value = "/addUsers",produces = "application/json;charset=utf-8") 返回json对象
    @RequestMapping(value = "/addUsers",produces = MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
    @ResponseBody
    @CrossOrigin(origins ="http://localhost:8888")
    public Object addUsers(@RequestBody Users users)throws Exception{
      System.out.println(users);
      return users;
    }
    

    2. 前端通过Ajax发送json

    • 借助jQuery来发送Ajax请求。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>发送json</title>
    		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<script type="text/javascript">
    			function send1() {
    				var beauty = JSON.stringify({ //将JSON对象转换为字符串
    					"name": "小甜甜",
    					"age": 26,
    					"salary": 200000,
    					"date": "2019-08-05 08:04:13"
    				});
    
    				$.ajax({
    					type: 'POST',
    					url: "http://localhost:8080/simple",
    					data: beauty,  //beauty是字符串
    					contentType: "application/json",
    					dataType: "json",
    					success: function(message) {
    						alert(JSON.stringify(message)) //将JSON对象转换为字符串
    					}
    				});
    			};
    
    			function send2() {
    				var beauty = JSON.stringify({
    					"MM": [{
    						"name": "春花",
    						"age": 27,
    						"salary": 20000,
    						"date": "2017-05-19 09:33:14"
    					}, {
    						"name": "秋香",
    						"age": 30,
    						"salary": 30000,
    						"date": "2019-10-21 17:04:33"
    					}],
    					"master": {
    						"name": "小甜甜",
    						"age": 26,
    						"salary": 200000,
    						"date": "2019-08-05 08:04:13"
    					}
    				});
    
    				$.ajax({
    					type: "POST",
    					url: "http://localhost:8080/complex",
    					contentType: "application/json; charset=utf-8",
    					data: beauty,
    					dataType: "json",
    					success: function(message) {
    						alert("提交成功" + JSON.stringify(message));
    					},
    					error: function(message) {
    						alert("提交失败" + JSON.stringify(message));
    					}
    				});
    			}
    		</script>
    
    		<input type="button" name="btn1" id="s1" onclick="send1()" value="发送简单json" />
    		<br />
    		<hr />
    		<input type="button" name="btn2" id="s2" onclick="send2()" value="发送复杂json" />
    	</body>
    </html>
    

    这里要注意:

    1. script标签引入js的形式必须是双标签,形如:
      <script src="…js" …></script>
      如果是形如<script src="…js" … />的单标签,将无法引入js。
    2. 页面提交的数据默认content-type是application/x-www-form-urlcoded的编码(键值对)。而@RequestBody注解只有在编码为application/json时才能将JSON 格式的数据转为 Java 对象。
    3. 对于jQuery一般是使用$.ajax来发送json请求,因为只有它可以设置编码格式(application/json)。
    • HTML5中如何实现JSON对象与字符串之间的相互转换?
    //string -> json
    JSON.parse("...")
    
    //json -> string
    JSON.stringify(obj)
    

    3. 跨域访问

    • 同源策略
      ajax请求须受到同源策略的影响。

    • 跨域请求
      在 JavaScript 的请求中当一个请求 URL 的协议、域名、端口三者之间任意一个与当前页面 URL 不同时即为跨域。

    • ajax请求如何受同源策略限制
      一个页面的URL(origin)与同一页面中ajax访问的URL出现跨域时,ajax请求被服务器端block。

    • 处理方式

    前端:jsonp(json with padding)
    jsonp的原理就是script标签不受同源策略的影响,所以通过script的src属性来实现跨域。

    //原生js
    var script = document.createElement("script");
    script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
    document.body.insertBefore(script, document.body.firstChild);
    
    //在页面中,返回的JSON作为参数传入回调函数中
    functionhandleResponse(response){
    // 对response数据进行操作代码
    }
    
    //jQuery GET
    $.ajax({
                    async : true,
                    url : "https://api.douban.com/v2/book/search",
                    type : "GET",
                    dataType : "jsonp", // 返回的数据类型,设置为JSONP方式
                    jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                    jsonpCallback: 'handleResponse', //设置回调函数名
                    data : {
                        q : "javascript", 
                        count : 1
                    }, 
                    success: function(response, status, xhr){
                        console.log('状态为:' + status + ',状态是:' + xhr.statusText);
                        console.log(response);
                    }
                });
    
    //jQuery POST
    $.ajax({
        url:'http://localhost:8888/other/other.jsp',
        type:'post',
        data:{'params':'fromjsonp'},
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
        success: function(data){
            alert("through jsonp,receive data from other domain : "+data.result);
        },
        error: function(){
            alert('fail');
        }
    });
    

    后端:@CrossOrigin

    @Controller
    @RequestMapping("/user")
    public class UsersController {
    
        @RequestMapping(value = "/addUsers",produces = MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
        @ResponseBody
        //限定发送 ajax的页面的初始url,即origins(可多个origin url)。其他的不受理。
        //不给出origins则处理所有origin url的跨域 ajax请求。
        @CrossOrigin(origins ="http://localhost:8888")
        public Object addUsers(@RequestBody Users users)throws Exception{
            System.out.println(users);
           return users;
        }
    }
    

    4. 使用Java如何模拟客户端发送json的http请求?

    展开全文
  • ajax请求复杂json数据实例,下载看看下载看看下载看看
  • 该文件由ajax请求调用。...使用jsonajax请求调用的文件中获取值//Some processing gives $text$s=nl2br($text);$data['x'] = $p;$data['y'] = $q;//Start from hereecho "Positive count : $x with $p % "; echo "...

    该文件由ajax请求调用。而来到这里的结果我想在调用函数中放入两个不同的地方。使用json从ajax请求调用的文件中获取值

    //Some processing gives $text

    $s=nl2br($text);

    $data['x'] = $p;

    $data['y'] = $q;

    //Start from here

    echo "Positive count : $x with $p % "; echo "";

    echo "Negative count : $y with $q % "; echo "";

    echo "";

    echo "Page content : ";

    echo "";

    echo "";

    echo $s;

    //End. This content should be place in . Want to send this as a json string

    //Start from here

    echo "First 5 post";

    $result = mysqli_query($con,"select post from facebook_posts where p_id > (select MAX(p_id) - 5 from facebook_posts)");

    while ($row = $result->fetch_array(MYSQLI_ASSOC))

    {

    echo $row['post'];

    echo '
    ';

    }

    //End. This content should be placed in Want to send this as a json string

    如果只有一个变量,然后我们就可以很容易地做到这一点使用:

    $resultArray = array("resultOne" => $result1,"resultTwo" => $result2);

    echo json_encode($resultArray);

    在接收端:

    document.getElementById("myFirstDiv").innerHTML=xmlhttp.responseText.resultOne;

    document.getElementById("mySecondDiv").innerHTML=xmlhttp.responseText.resultTwo;

    但怎么以上复杂的结果可以放置到json变量?

    展开全文
  • //转换成object JSONObject jsonObj = JSON.parseObject(data); //获取jsonObj中obj字段并转换为数组; JSONArray result = jsonObj.getJSONArray("obj"); //把json里面的集合封装到List中去 List links= JSON....

    环境:springboot框架

    页面:使用thymeleaf模板

    html页面:

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>用户登录</title>
        <link rel="stylesheet" th:href="@{/css/bootstrap.css}"></link>
         <script src="../static/js/jquery-1.7.2.js" type="text/javascript" th:src="@{/js/jquery-1.7.2.js}"></script>
       <script type="text/javascript" th:inline="javascript">
            function ajaxSubmit(){
            var json = {"type":"学生","class":"2016级","obj":[{"user_name":"lisi","password":"123","name":"李四","age":"19"},{"user_name":"wangwu","password":"456","name":"王五","age":"19"}]}
            var post={data:JSON.stringify(json)};
                $.ajax({
                     url: [[@{/user/login}]],
                     type: "POST",
                     data: post,
                     dataType: "json",
                     success: function(data){
                         alert("解析复杂json数据成功")
                     },
                     error:function(err){
                         alert("解析复杂json数据成功失败")
                      }
                         
                });
            }
        
        </script>
    </head>
    <body class="container">
    <br/>
    <h1>用户登录</h1>
    <br/><br/>
    <div class="with:80%">
    
        <button onclick="ajaxSubmit()">提交</button>
    
    
    </div>
    </body>
    
    </html>

    java代码:

    @PostMapping("/user/login")
        @ResponseBody
        public void doLogin(Model model,String data){
            ///String parameter = request.getParameter("data");
            //转换成object
            JSONObject jsonObj = JSON.parseObject(data);
            //获取jsonObj中obj字段并转换为数组; 
            JSONArray result = jsonObj.getJSONArray("obj");
            //把json里面的集合封装到List<User>中去
            List<User> links= JSON.parseArray(result.toJSONString(),User.class);
            //获取jsonObj中type、class字段;    
            String type = (String) jsonObj.get("type");
            String className = (String) jsonObj.get("class");
            System.out.println(">>>>>>>>>>>type>>>>>>>>>>"+type);
            System.out.println(">>>>>>>>>>>className>>>>>>>>>>"+className);
            for (User user : links) {
                System.out.println(user.toString());
            }
    
    //集合转换成json数组
    
    List<PaperPlan> list = new ArrayList<PaperPlan>();
            JSONArray parseArray = JSONArray.parseArray(JSON.toJSONString(list));
        }

     

    展开全文
  • jquery发送ajax请求 //js代码ajax请求 function sendimgtest(){ ... obj.message = "ajax发送的参数"; $.ajax({ url: "http://127.0.0.1:8080/MyProject/ohello", data:null, type: "GET", dat
  • 1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/json”,首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果...
  • 1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/json”,首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果ajax...
  • 1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/json”,首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果...
  • * JSON属性如下 * loginName: "jay" * password : "3333" * roles : { id : 4 } * user : { name:"username" , officeName : "java"} * ----------------------------...
  • Ajax - 使用JSON向服务器发送数据

    千次阅读 2007-08-13 00:00:00
    不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。JSON概述XML的一个替代方法是JSON,可以在...
  • So far I have never had the need to send data from ajax to two or more complex type parameters in the server method.What I am trying to achieve is if I had this action on my controller:[HttpPost][Auth...
  • ajax发送请求时,有复杂参数,如下java要接受的参数 private List<String> piclist; private List<QuestionAnswer> objanswerList; private Long homeworkid; 第一步 js进行组装 ps:piclist和...
  • 简介: AJAX: Asynchronous JavaScript and XML(异步的...JSON: JavaScriptObjectNotation(JavaScript 对象表示法) 请求常用格式 var 变量名= $.trim($("#标签id").val());//获取标签内容 $.ajax({ type:"POS...
  • JQUERY 实现AJAX跨域获取json数据实例

    千次阅读 2014-12-22 16:03:06
    在项目中有时需要跨站点获取相关数据,使用ajax如何实现跨域获取json数据。 Jquery有封装好的实现方法,可以直接使用$.ajax()方法实现,只需要设置jsonp格式等相关变量即可;也可以使用$.getJSON()方法。 那么实现...
  • Ajax使用JSON向服务器发送数据

    千次阅读 2016-07-01 17:36:37
    不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。 JSON概述 XML的一个替代方法是JSON,可以在...
  • Ajax跨域提交JSON和JSONP

    千次阅读 2013-07-11 15:32:14
    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的...
  • AJAX&JSON

    千次阅读 2020-06-05 20:16:56
    AJAX 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步:客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待...
  • AjaxJson

    2020-10-27 19:42:10
    2.JSON AJAX文档参考W3CSchool AJAX 1:概念: ASynchronous JavaScript AND XML 异步的JavaScript 和xml 两门技术 1.异步和同步:客户端和服务器端相互通信的基础上 同步:客户端必须等待服务器的响应,在等待...
  • 一、原生js通过ajax获取json数据 原生js创建ajax对象比较复杂,因为IE浏览器对ajax对象的创建于其他浏览器不同,下面创建ajax对象的方法就兼容了不同的浏览器 function createXMLHttpRequest(){ try{ ...
  • 根本原因就是,W3C规范这样要求了,在跨域请求中,分为简单请求(get和部分post,post时content-type属于application/x-www-form-urlencoded,multipart/form-data,text/plain中的一种)和复杂请求。而复...
  • Ajax跨域请求 JSON JSONP

    千次阅读 2016-02-23 08:39:01
    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。  当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5...
  • Ajax:使用 JSON 进行数据传输

    千次阅读 2012-08-25 21:21:22
    在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式。本文讨论另一种有用的数据格式 JavaScript Object Notation(JSON),以及如何使用它更轻松地在应用程序中移动数据和对象…… 许多...
  • Ajax&JSON笔记

    2020-12-31 23:21:41
    文章目录AJAX:1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XMLajax原理:2. 实现方式:原生的JS实现方式(了解)JQeury实现方式JSON:1. 概念: JavaScript Object Notation,JavaScript对象...
  • 14Ajax&Json笔记

    千次阅读 2020-06-18 10:56:16
    title: AJAX&&JSON复习(十四) author: echo categories: AJAX JSON 复习 tags: AJAX JSON ...文章目录今日内容更多文章请移步:[我的博客](http://www.echo20.top/)AJAXJSON:案例: 今.
  • AJAX&JSON超级最详细讲解

    万次阅读 多人点赞 2020-04-02 23:36:31
    今日内容1.AJAXA.概念B.实现方式1.原生的JS实现方式1. 创建核心对象(查看W3C)2. 创建了之后就需要`建立起连接`,如何实现呢?2.JQeury实现方式2.JSONA....1.AJAX A.概念 概念 :ASynchronous JavaScri...
  • Ajax处理Json数据演示

    2017-08-28 15:30:03
    Ajax处理Json数据演示
  • AjaxJSON

    千次阅读 2016-04-23 23:33:15
    AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,891
精华内容 10,356
关键字:

ajax发送复杂json