精华内容
下载资源
问答
  • /** * 初始化 serializeObject */ function initSerializeObject() { $.fn.serializeObject = ... data: JSON.stringify(jsonData), //转换成json数据 success: function (resultData) { } }); }  
    /**
     * 初始化  serializeObject
     */
    function initSerializeObject() {
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    }
    
    function submit(){
        // 初始化 序列化对象的方法
        initSerializeObject();
        //获取 from表单的数据
        let jsonData = $("#from-appointment").serializeObject();
        $.ajax({
                type: "post",
                url: "",
                contentType: "application/json; charset=utf-8",
                cache: false,
                async: false,
                data: JSON.stringify(jsonData), //转换成json数据
                success: function (resultData) {
                    
                }
            });
    }
    

     

    展开全文
  • data : JSON.stringify(madd_data.editMaintain), contentType : "application/json", dataType : "json", complete:function(msg) { layer.msg("报修成功",{time:2000}); layer.close(madd_data.w_c_
  • JSON格式提交数据到服务端

    千次阅读 2018-04-01 14:34:29
    用AJAX以JSON方式提交数据</title> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <form > 名称:<input type="text" id="name"/><br/> 血量:...

    准备Hero.java

    public class Hero {
    	private String name;
    	private int hp;
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public int getHp() {
    		return hp;
    	}
    	public void setHp(int hp) {
    		this.hp = hp;
    	}
    	@Override
    	 public String toString() {
    	        return "Hero [name=" + name + ", hp=" + hp + "]";
    	    }
    }

    submit.html文件

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>用AJAX以JSON方式提交数据</title>  
    <script type="text/javascript" src="jquery.min.js"></script>  
    </head>  
    <body>  
        <form >  
           名称:<input type="text" id="name"/><br/>  
            血量:<input type="text" id="hp"/><br/>  
            <input type="button" value="提交" id="sender">   
        </form>  
        <div id="messageDiv"></div>  
          
        <script>  
        $('#sender').click(function(){  
            var name=document.getElementById('name').value;  
            var hp=document.getElementById('hp').value;  
            var hero={"name":name,"hp":hp};  
            var url="submitServlet";  
              
            $.post(
            		url, 
            		{"data":JSON.stringify(hero)},
            		function(data) {  
    		             alert("提交成功,请在Tomcat控制台查看服务端接收到的数据");
             });   
    
              
        });  
        </script>  
    </body>  
      
    </body>
    </html>

    JSON.stringify函数的作用是将一个javascript对象,转换为JSON格式的字符串。

     

    准备SubmitServlet用来接收数据

    import java.io.IOException;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONObject; 
       
    public class SubmitServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
            String data =request.getParameter("data");
             
            System.out.println("服务端接收到的数据是:" +data);
      
            JSONObject json=JSONObject.fromObject(data); 
              
            System.out.println("转换为JSON对象之后是:"+ json);
               
            Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
            System.out.println("转换为Hero对象之后是:"+hero);
        } 
    } 

    1. 获取浏览器提交的字符串
    2. 把字符串转换为JSON对象

     

    3. 把JSON对象转换为Hero对象

     

    最后配置web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app>
     
        <servlet>
            <servlet-name>SubmitServlet</servlet-name>
            <servlet-class>SubmitServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>SubmitServlet</servlet-name>
            <url-pattern>/submitServlet</url-pattern>
        </servlet-mapping>
     
    </web-app>

    启动tomcat访问http://127.0.0.1:8080/项目名/submit.html

    在tomcat控制台看到传来的数据

     

     

    获取一个对象

    准备GetOneServlet

    import java.io.IOException;
    import java.io.Writer;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONObject; 
       
    public class GetOneServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
              
            Hero hero = new Hero();
            hero.setName("盖伦");
            hero.setHp(353);
             
            JSONObject json= new JSONObject();
       
            json.put("hero", JSONObject.fromObject(hero));
            response.setContentType("text/html;charset=utf-8"); 
            response.getWriter().print(json);
        } 
    } 

    web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app>
     
        <servlet>
            <servlet-name>SubmitServlet</servlet-name>
            <servlet-class>SubmitServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>SubmitServlet</servlet-name>
            <url-pattern>/submitServlet</url-pattern>
        </servlet-mapping>
        <servlet>
            <servlet-name>GetOneServlet</servlet-name>
            <servlet-class>GetOneServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>GetOneServlet</servlet-name>
            <url-pattern>/getOneServlet</url-pattern>
        </servlet-mapping>
     
    </web-app>

    getOne.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>用AJAX以JSON方式获取数据</title> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    </head> 
    <body> 
        <input type="button" value="通过AJAX获取一个Hero对象" id="sender">  
       
        <div id="messageDiv"></div> 
           
        <script> 
        $('#sender').click(function(){ 
            var url="getOneServlet"; 
            $.post(
                    url,
                    function(data) {
                         var json=JSON.parse(data); 
                         var name =json.hero.name; 
                         var hp = json.hero.hp;
                         $("#messageDiv").html("英雄名称:"+name + "<br>英雄血量:" +hp );
                          
             });  
        }); 
        </script> 
    </body> 
       
    </body>
    </html>

    测试(重启tomcat)

    启动tomcat访问http://127.0.0.1:8080/项目名/getOne.html

     

    3 获取多个对象

    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONSerializer; 
       
    public class GetManyServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
            List<Hero> heros = new ArrayList<>();
            for (int i = 0; i < 10; i++) {
                Hero hero = new Hero();
                hero.setName("name"+i);
                hero.setHp(500+i);
                heros.add(hero);
            }
             
            String result =JSONSerializer.toJSON(heros).toString();
     
            response.setContentType("text/html;charset=utf-8"); 
            response.getWriter().print(result);
        } 
        public static void main(String[] args) {
            List<Hero> heros = new ArrayList<>();
            for (int i = 0; i < 10; i++) {
                Hero hero = new Hero();
                hero.setName("name"+i);
                hero.setHp(500+i);
                heros.add(hero);
            }
             
            System.out.println(JSONSerializer.toJSON(heros).toString());
        }
    } 

    web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app>
     
        <servlet>
            <servlet-name>SubmitServlet</servlet-name>
            <servlet-class>SubmitServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>SubmitServlet</servlet-name>
            <url-pattern>/submitServlet</url-pattern>
        </servlet-mapping>
        <servlet>
            <servlet-name>GetOneServlet</servlet-name>
            <servlet-class>GetOneServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>GetOneServlet</servlet-name>
            <url-pattern>/getOneServlet</url-pattern>
        </servlet-mapping>
        <servlet>
            <servlet-name>GetManyServlet</servlet-name>
            <servlet-class>GetManyServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>GetManyServlet</servlet-name>
            <url-pattern>/getManyServlet</url-pattern>
        </servlet-mapping>
     
    </web-app>

    getMany.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>用AJAX以JSON方式获取数据</title> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    </head> 
    <body> 
        <input type="button" value="通过AJAX获取多个Hero对象" id="sender">  
       
        <div id="messageDiv"></div> 
           
        <script> 
        $('#sender').click(function(){ 
            var url="getManyServlet"; 
            $.post(
                    url,
                    function(data) {
                        var heros = $.parseJSON(data);
                         for(i in heros){
                             var old = $("#messageDiv").html();
                             var hero = heros[i];
                             $("#messageDiv").html(old + "<br>"+hero.name+"   -----   "+hero.hp); 
                         }
             });  
        }); 
        </script> 
    </body> 
       
    </body>
    </html>

     

    测试(重启tomcat)

    启动tomcat访问http://127.0.0.1:8080/项目名/getMany.html

     

     

     

     

    展开全文
  • JQuery post json 数据提交心得

    万次阅读 2018-03-08 15:53:04
    <!... , initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> ... <title>Signin Template for Bootstrap ...程序的要求:post提交json数据 返回值
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <meta name="description" content="">
        <meta name="author" content="">
      
    
        <title>Signin Template for Bootstrap</title>
    <script src="js/jquery-3.2.1.js"></script>
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.css" rel="stylesheet">
    
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    
        <!-- Custom styles for this template -->
        <link href="css/signin.css" rel="stylesheet">
    
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="js/ie-emulation-modes-warning.js"></script>
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    
        <![endif]-->
      </head>
     
    <script>
    $(document).ready(function(){
      $("button").click(function(){
      alert(JSON.stringify(GetJsonData()))
       $.ajax({   
       contentType: 'application/json',
      type: 'POST',
      url: "http://192.168.0.1:8082/api/User/UserToken",
       dataType: "json",
      data: JSON.stringify(GetJsonData()),
       success: function (message) {
      if(message.err.code)
               alert(message.err.code);
    			if(message.err.code)){
    			alert(message.err.code);
    			}
            
            },
            error: function (message) {
               console.log(message);
    			alert("提交数据失败!888"+message);
    			
            }
    });
     
    });
    function GetJsonData() {
        var json = {	
        "username":$("#inputUsername").val(), 
        "password":$("#inputPassword").val()
        };
        return json;
    }
       
    });
    </script>
      <body>
    
    </head>
    <body>
    
    
        <div class="container">
    
          <form class="form-signin" >
            <h2 class="form-signin-heading">Please sign in</h2>
           
            <input type="email" id="inputUsername" class="form-control" placeholder="username" required autofocus>
           
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
           
            <button class="btn btn-lg btn-primary btn-block" >Sign in</button>
          </form>
    	  
    
        </div> <!-- /container -->
    
    
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="js/ie10-viewport-bug-workaround.js"></script>
      
      
        
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
        
      </body>
    </html>
    注意:contentType: 'application/json',
    type: 'POST',

    程序的要求:post提交,json传数据

    返回值


    展开全文
  • 本篇文章主要介绍了Android如何通过Retrofit提交Json格式数据,具有一定的参考价值,有兴趣的可以了解一下
  • 简单的Json数据提交,后台结合asp.net,需要的朋友可以参考下。
  • form表单提交json格式数据

    万次阅读 2017-09-04 17:17:14
    参考自 jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解个人实践整理。方式一:发送数据 //发送表单ajax请求 $(':submit').on('click',function(){ $.ajax({ url:"bu

    参考自 jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解

    个人实践整理。

    方式一:

    发送数据

    <script type="application/javascript">
        //发送表单ajax请求
        $(':submit').on('click',function(){
            $.ajax({
                url:"buy",
                type:"POST",
                data:JSON.stringify($('form').serializeObject()),
                contentType:"application/json",  //缺失会出现URL编码,无法转成json对象
                success:function(){
                    alert("成功");
                }
            });
        });
    
        /**
         * 自动将form表单封装成json对象
         */
        $.fn.serializeObject = function() {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [ o[this.name] ];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    </script>

    contentType:”application/json”不能缺失,缺失数据会成为URL编码,造成无法转成json对象,后台接收的内容如下

    String: %7B%22huohao%22%3A%22234%22%2C%22changjia%22%3A%221234%22%2C%22yanse%22%3A%22%22%2C%22xiangshu%22%3A%22%22%2C%22shuangshu%22%3A%22%22%2C%22jinjia%22%3A%22%22%2C%22riqi%22%3A%22%22%2C%22shoujia%22%3A%22%22%2C%22beizhu%22%3A%22asdf%22%7D=

    controller接收

    @RequestMapping(value = "/buy")
    public void addBuy(@RequestBody String buyAdd){
       System.out.println("String: "+buyAdd);
       BuyAdd add = JSON.parseObject(buyAdd, BuyAdd.class);  //此处用的FastJson转换为对象
       System.out.println("**************");
       System.out.println("Object: "+add);
       System.out.println("==============================");
    }

    接收显示为

    String: {"huohao":"111","changjia":"222","yanse":"33","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":"aaa"}
    **************
    Object: BuyAdd{huohao='111', changjia='222', yanse='33', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='aaa'}
    ==============================

    声明:这里我用的是FastJson转换,因为@RequestBody并不支持FastJson,所以进行的手动转换。Jackson可以直接用@RequestBody对象类型自动转换(即addBuy(@RequestBody BuyAdd buyAdd))。


    此处记录一种特殊需求,表单传递的为多个相同对象
    用上述方式是这种结果

    String: {"huohao":["5678","4567"],"changjia":["978","9678"],"yanse":"","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":""}

    两个对象合并为一个json发送过去,后台解析会很麻烦
    这里我将form表单封装成json对象的方法进行了更改,使其最后为json对象的集合,后台可以直接读取集合进行解析

    /**
     * 自动将form表单封装成json对象
     */
    $.fn.serializeObject = function() {
        var list = [];
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (!o[this.name] && o[this.name]!='') {
                o[this.name] = this.value || '';
            } else {
                list.push(o);
                o={};
                o[this.name] = this.value || '';
            }
        });
        list.push(o);
        return list;
    };

    controller

    @RequestMapping(value = "/buy")
        public void addBuy(@RequestBody String requestAddBuy){
            System.out.println("String: "+ requestAddBuy);
            List<RequestAddBuy> addBuy = JSON.parseArray(requestAddBuy, RequestAddBuy.class);
            System.out.println(addBuy);
        }

    最后的结果

    String: [{"huohao":"54674","changjia":"78i","yanse":"","xiangshu":"","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":""},{"huohao":"457","changjia":"","yanse":"","xiangshu":"457","shuangshu":"","jinjia":"","riqi":"","shoujia":"","beizhu":"678ur7t"}]
    [RequestAddBuy{huohao='54674', changjia='78i', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu=''}, RequestAddBuy{huohao='457', changjia='', yanse='', xiangshu='457', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='678ur7t'}]

    声明:这里同样是存在FastJson的问题,如果用Jackson则可以把controller改为addBuy(@RequestBody List<RequestAddBuy> requestAddBuy)


    方式二:

    发送数据

    <script type="application/javascript">
        //发送表单ajax请求
        $(':submit').on('click',function(){
            $.ajax({
                url:"buy",
                type:"POST",
                data:$('form').serializeArray(),
                contentType:"application/x-www-form-urlencoded",
                success:function(){
                    alert("成功");
                }
            });
        });
    </script>

    使用jQuery自带方法$.serializeArray()转换
    然后使用contentType:”application/x-www-form-urlencoded”格式

    controller接收

    @RequestMapping(value = "/buy")
       public void addBuy(BuyAdd buyAdd){
          System.out.println(buyAdd);
       }

    接收显示

    BuyAdd{huohao='245', changjia='wef', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='2345'}

    这种方式可以直接接收对象,不如直接使用form自动提交省事(方式三)

    方式三:

    数据传输

    <form action="buy" method="post">

    controller接收

    @RequestMapping(value = "/buy")
       public void addBuy(BuyAdd buyAdd){
          System.out.println(buyAdd);
       }

    接收显示

    BuyAdd{huohao='245', changjia='wef', yanse='', xiangshu='', shuangshu='', jinjia='', riqi='', shoujia='', beizhu='2345'}
    展开全文
  • 摘要: js封装from表单数据json串进行ajax提交 json封装代码 function getFormJson(frm) { //frm:form表单的id var o = {}; var a = $("#"+frm).serializeArray(); $.each(a, function() { if (o[this.name]...
  • java 通过发送json,post请求,返回json数据的方法 java 通过发送json,post请求,返回json数据的方法
  • 表单提交json提交(重要)

    千次阅读 2020-06-11 09:36:41
    背景 在前后端分离的开发组中,前端通常对自己代码组织的比较细致,都会对AJAX,或者小程序API做封装。... ... 本质上Content-Type 要么就是text/html要么就是json要么就是表单。...JSON 当Content-...
  • 主要介绍了PHP基于curl模拟post提交json数据操作,结合实例形式分析了php使用curl实现post方式提交json数据相关操作步骤与注意事项,代码简单实用,需要的朋友可以参考下
  • getJSON跨域提交数据,想必大家已在很多文章中见到过,下面的示例是php jq jquery getJSON跨域提交数据完整代码,感兴趣的朋友可以参考下
  • 目的:Vue 中 把表单form数据 转化成json格式的数据 第一步:创建一个数据集(就是你表单需要的数据) 如果你表单都是一些正常的数据,比如 text 什么的。你定义好数据集,就去用 v-model 绑定数据。这样就可以实现...
  • 1.常用类NSURL:请求地址 NSURLRequest:一个NSURLRequest对象就代表一个请求,它包含的信息有:一个NSURL对象请求方法;请求头、请求体;...发送NSURLRequest的数据给服务器,并收集来自服务器的响应数据2、N
  • 主要介绍了使用JSON格式提交数据到服务端的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
  • 主要介绍了JQuery如何以JSON方式提交数据到服务端,需要的朋友可以参考下
  • 主要介绍了详解iOS通过ASIHTTPRequest提交JSON数据,对代码进行了详细的讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 表单提交json提交的区别

    千次阅读 2020-02-29 11:22:52
    1 表单提交 (1)从前端传过来的请求参数是key=value形式的 ...2 json格式提交 (1)前端传过来的参数是字符串,以json格式呈现 (2)springmvc接收需要使用@RequestBody注解,对json字符串进行解析 ...
  • NULL 博文链接:https://cxl2012.iteye.com/blog/2210521
  • 而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端。服务器端接收到的数据是直接可以使用的合格JSON代码。  如何声明以JSON格式提交表单  大家应该对如何...
  • OkHttp Post提交json数据

    万次阅读 2019-01-25 09:54:53
    new Thread() { @Override public void run() { // @Headers({"Content-Type: application/json","Accept: application/json"})//需要添加头 MediaType JSON = ...
  • httpclient post json 数据

    2017-03-24 23:32:36
    利用c# httpclient ,post json数据到web api
  • python提交表单和提交json

    千次阅读 2017-08-31 18:25:39
    python提交表单 #!/usr/bin/python # -*- coding:utf-8 -*- import httplib,urllib,json; def SendRedPacket(): params = urllib.urlencode({'count':'100', 'amount':'6666', }); headerdata =
  • 主要给大家介绍了利用Mongoose让JSON数据直接插入或更新到MongoDB数据库的相关资料,文中详细介绍了配置Mongoose、创建目录及文件、插入数据,POST提交JSON增加一条记录以及询数据,取出刚增加的记录等内容,需要的...
  • 下面小编就为大家分享一篇form表单数据封装成json格式并提交给服务器的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • HTTP Post提交与接收Json Winform程序,实现Json提交和接收
  • 有些时候会遇到请求http,获取相应的json或者xml数据,今天整理了一点httpClient请求的示例代码。主要是根据相应的http地址,以及相关秘钥,通过HttpClient去发起请求,获取数据然后后台取解析json或者xml。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 206,503
精华内容 82,601
关键字:

json数据提交