精华内容
下载资源
问答
  • 主要介绍了ThinkPHP中使用ajax接收json数据的方法,包括了前台js代码与对应的PHP处理代码,非常具有实用价值,需要的朋友可以参考下
  • 主要介绍了如何使用ajax读取Json中的数据,如何使用AJAX读取Json数组里面的数据,感兴趣的小伙伴们可以参考一下
  • ajax接收json数据的解析

    千次阅读 2019-06-05 17:01:25
    假设收到服务器返回的json字符串:...$.ajax({ url: usl, type : “post”, dataType : “json”, data : userData, success : function(data){ //转换json字符串为json对象 //方式一: var obj = eval("("+data+")"...

    假设收到服务器返回的json字符串:{id:1,name:Tom},{id:2,name:Jack}
    $.ajax({
    url: usl,
    type : “post”,
    dataType : “json”,
    data : userData,
    success : function(data){
    //转换json字符串为json对象
    //方式一:
    var obj = eval("("+data+")");
    //方式二:
    var obj2 = JSON.parse(data);

    	//转为json对象可以直接点属性
    	console.log(obj.name);
    	console.log(obj2.name);
    	}
    });
    

    建议使用第二种JSON.parse(),第一种麻烦,且存在注入执行代码的风险。

    展开全文
  • ajax接收json数据到js解析

    万次阅读 2016-09-23 14:30:35
    第一种:ajax接收到list并返回给前台 js代码: function test(obj){ var str = $("#tt").val(); webTest(str,function(result){ alert(result);//将后台返回结果alert一下 var list = eval...

    今天又学到了一点新知识,脑子记不住东西特把它记录下来!

    页面ajax请求后台时一般都是返回字符串进行判断,要是返回list或者对象时该怎么办?

    第一种:ajax接收到list并返回给前台

    js代码:

    function test(obj){
    			var str = $("#tt").val();
    			webTest(str,function(result){
    				alert(result);//将后台返回结果alert一下
    				var list = eval(result);//解析json
    				for(var i = 0;i < list.length;i++){//循环遍历数据
    					var userinfo = list[i];
    					alert(userinfo.name+"+"+userinfo.age+"+"+userinfo.sex+"+"+userinfo.address);
    
    				}
    			});	
    		}
    上面红字webTest方法(这里是调用webservice,和ajax处理流程一样)
    var webTest = function (test, callback) {
        var soapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:bs="http://inter.hs.com/">'
                + '<soapenv:Header/>'
                + '<soapenv:Body>'
                + '<bs:test>'
                + '<para>' + test + '</para>'
                + '</bs:test>'
                + '</soapenv:Body>'
                + '</soapenv:Envelope>';
        PostData(soapMessage, callback);
    }

    后台代码:

    @Override
    	public String test(String str) {
    		List<UserInfo> list = new ArrayList<UserInfo>();
    		UserInfo ui = new UserInfo();
    		ui.setName("tom");
    		ui.setAge(22);
    		ui.setSex("男");
    		ui.setAddress("陕西西安");
    		list.add(ui);
    		JSONObject ja = JSONObject.fromObject(list);//将list包装成json传递给前台
    		return ja.toString();
    	}
     运行结果:

    第二种情况,接收对象数据返回:

    js代码:

    <script>
        $("div.submit_op>input").click(function(){
        	var uname = $("#acount").val();
        	var pass = $("#pass").val();
        	if(uname==""){
        		alert("请输入用户名");
        	}else if(pass == ""){
        		alert("请输入密码");
        	}else{
        	 	ecLogin(uname,pass,function(result){//这一步可以堪称是ajax请求后台,result是返回结果
        			if(result == "false"){
        				alert("用户名或者密码错误");
        			}else{
        				var userinfo = eval(result)[0];//当是单个对象时,虽不用循环遍历,但是需要【0】取</span>
        				alert(userinfo.user_reg_id);
        			}
        		});
        	}
    
        })
    </script>

    /**
     * 登录接口
     * @param phone 手机号
     * @param pass 密码
     * @param callback func 回调函数,原型function(string) 其中参数为登录之后的用户对象或者null
     * @returns
     */
    var ecLogin = function (phone, pass, callback) {
    	alert(phone);
        var soapMessage = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:bs="http://inter.hs.com/">'
                + '<soapenv:Header/>'
                + '<soapenv:Body>'
                + '<bs:login>'
                + '<phone>' + phone + '</phone>'
                + '<pass>' + pass + '</pass>'            
                + '</bs:login>'
                + '</soapenv:Body>'
                + '</soapenv:Envelope>';
        PostData(soapMessage, callback);
    }
    后台代码:
    	@Override
    	public String login(String strPhone, String password) {
    		String str = "false";
    		Connection conn = DBManager.getConnection();
    		String sql = "select * from tb_user_login where user_phone = ? and user_pwd = ?";
    		PreparedStatement ps = null;
    		ResultSet rs = null;
    		try {
    			ps = conn.prepareStatement(sql);
    			ps.setString(1, strPhone);
    			ps.setString(2, password);
    			rs = ps.executeQuery();
    			while (rs.next()){
    				UserLogin ul = new UserLogin();
    				ul.setUser_reg_id(rs.getString(1));
    				ul.setUser_phone(rs.getString(2));
    				JSONObject ja = JSONObject.fromObject(ul);
    				str = ja.toString();
    			}
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		return str;
    	}

    如有不对,还请各位大牛指正!

    展开全文
  • ajax接收json数据在页面显示

    千次阅读 2018-05-16 16:43:59
    json"说明返回值类型为json(也可以为xml/html/script/jsonp/text)$("#input").val(data.col); $("#div").html("col1:"+data.col1+" "+"col2:"+data.col2)...

    dataType : "json"说明返回值类型为json(也可以为xml/html/script/jsonp/text)

    $("#input").val(data.col);
    	
    $("#div").html("col1:"+data.col1+" "+"col2:"+data.col2);
    
    alert(JSON.stringify(data));

    $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。



    展开全文
  • 开发中遇到的问题,记录下. 在开发中遇到一个需求,需要把查出来的数据通过点击事件异步显示到页面上去,由于...拼接了.(查出来的数据json格式的). 开始前先介绍总结下ajax前后台知识,一步一步来: 1.使用ajax之...

    开发中遇到的问题,记录下.

    在开发中遇到一个需求,需要把查出来的数据通过点击事件异步显示到页面上去,由于用到的框架是springboot,也没多想就直接去用thymeleaf了.结果就是model可以放进去,页面就是取不出来.后来才明白,这根本就是两码事,规规矩矩去取出data.拼接了.(查出来的数据是json格式的).

    开始前先介绍总结下ajax前后台知识,一步一步来:

    1.使用ajax之前先引入jquery

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

    2.ajax常用格式

        $.ajax({
    
            url: 'user/checkUname', // url  :请求地址 
            type: 'post', //type :请求类型:post/get 
            data: {
                //data :发送给服务器的数据 
                uUsername: u, // 使用自己声明的对象 
                uPwd: $("#pwd").val() < !--直接获取页面的对象
            },
            dataType: 'json', //dataType:服务器返回的数据类型 text/xml/script/html/json/jsonp 
            success: function (data) {   //回调函数 
                console.log(data);//浏览器控制台显示返回内容(建议使用) 
                alert(data);//弹框显示返回内容
            }
    
        });

     3.json 装换配置:

    3.1.使用@ResponseBody  //  这个注解一定要记得加

       <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
       </dependency>

    1).返回值写需要返回的类型

    2.)直接返回内容

    @RequestMapping("checkName")
    @ResponseBody
    public List<User> checkName(User user){
        List <User> userList = new ArrayList<User>();
        userList.add(user);
        userList.add(user);
        return userList;
    }
    

    二,使用alibaba的json转换工具

        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.4</version>
        </dependency>

    1).返回值写String类型

    2).JSON.toJSONString(userList);

    @RequestMapping("checkName")
    @ResponseBody
    public String checkName(User user){
        List <User> userList = new ArrayList<User>();
        userList.add(user);
        userList.add(user);
        return JSON.toJOSNString(userList);
    }
    

     4.ajax回调函数处理数据服务器返回的json数据

    success:function(data){
        console.log(data);
        alert(data.state);
    }

      1)获取返回值是对象的josn数据内容 

     

      获取用户名:zhangsan, data.uUsername;     (data.变量名)

      2)获取返回值是List的josn数据内容

        

       获取用户名:lisi , data[0].uUsername;        (data[ 索引].变量名)

       获取用户名:lisi , data[1].uUsername;

      3)获取返回值是Map的josn数据内容

     

    @RequestMapping("checkName")
    @ResponseBody
    public Map<Object,Object> checkName(User user){
        List <User> userList = new ArrayList<User>();
        userList.add(user);
        userList.add(user);
        HashMap<Object,Object> map = new  HashMap<>();
        map.put("userList",userList);
        map.put("state","200");
        return map;
    }
    

       获取状态:data.state;

       获取list中第一个user的名字:data.userlist[0].uUsername;

    注意:

       json数据解析主要是看层级,遇到{ }里的内容使用 . 获取,遇到0,1... 使用 [ ] 获取;

     


    上实际代码:html代码

    <li class="">
        <a href="#tab-3" data-toggle="tab"
           th:onclick="'javascript:viewLogisticDetail()'">信息查询</a>
    </li>

      (忽略样式,我的效果是选项卡)

    <div class="tab-pane" id="tab-3">
        <table class="table table-striped">
            <thead>
            <tr>
            <th id="num">序号</th>
            <th id="OptDate">操作时间</th>
            <th id="OptMan">操作人</th>
            <th id="OptReason">操作原因</th>
            <th id="OptSiteName">操作地址</th>
        </tr>
        </thead>
        <tbody id="tbody-result">
        </tbody>
        </table>
    </div>

    js代码:

    function viewLogisticDetail() {
            var url = "url"
            var OptDate = $("#OptDate").val();
            var OptMan = $("#OptMan").val();
            var OptReason = $("#OptReason").val();
            var OptSiteName = $("#OptSiteName").val();
    
            $.ajax({
                url: url,//url地址
                dataType: 'json',
                type: 'post',
                data: {
                    optDate: OptDate,//这里 : 前面一定要和json里面的字段一致. 
                    optMan: OptMan,
                    optReason: OptReason,
                    optSiteName: OptSiteName
                },
                success: function (data) {
                    $("#tab-3").addClass("active");
    
                        var dataObj = data.msg;//取出来想要的的json
                        var parseJSON = $.parseJSON(dataObj);//用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。
                        var ht = '';
                        for (var i = 0; i < parseJSON.length; i++) {
                            if (parseJSON[i].optMan == undefined) {
                                parseJSON[i].optMan = '';
                            }
                            if (parseJSON[i].optSiteName == undefined) {
                                parseJSON[i].optSiteName = '';
                            }
                            if (parseJSON[i].optReason == undefined) {
                                parseJSON[i].optReason = '';
                            }
                            if (parseJSON[i].preOrNextStation == undefined) {
                                parseJSON[i].preOrNextStation = '';
                            }
                            ht = ht + '<tr>';
                            ht = ht + '<td>' + (i + 1) + '</td>';
                            ht = ht + '<td>' + new Date(parseJSON[i].optDate).format("yyyy-MM-dd hh:mm:ss") + '</td>';
                            ht = ht + '<td>' + parseJSON[i].optMan + '</td>';
                            ht = ht + '<td>' + parseJSON[i].optReason + '</td>';
                            ht = ht + '<td>' + parseJSON[i].optSiteName + '</td>';
                            ht = ht + '</tr>';
                        }
                        $("#tbody-result").html(ht);
                    } 
                }
            })
        };

     

    展开全文
  • 首先从官网上找到南丁格尔玫瑰图的源码 官网链接-> ... 修改后可以正确运行的代码如下: <!...ajax ...以及将传进来的json数据push进jsondatas时,别忘记了数据前有个list。 结果图和官网相同:
  • 今天给大家带来一个简单的使用ajax接收后台返回json格式的demo废话不多说直接上代码后台代码package com.sidan.outjson;import java.io.IOException;import java.io.PrintWriter;import javax.servlet....
  • 今天小编就为大家分享一篇ajax获得json对象数组 循环输出数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1、在jsp页面的js中可以用jsp标签 var patientInfoList={patientId:”${session.patientId}”};var docDepList=[],noTypeMap=[“”,”普通号”,”主治医生号”,”副主任医师号”,”主任医师号”];...
  • jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。 代码示例如下: 代码如下: $(‘#send’).click...
  • Ajax请求接口,Django框架下从该接口接收Ajax发送的json数据,同时将新的json数据返回给AjaxAjax收到后在js进行处理,然后和页面内容交互。整个数据前后端交互全部采用json格式。代码高度封装,只需要更改json内容...
  • 如何使用AJAX返回JSON数据,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了,示例如下,感兴趣的朋友可以参考下
  • JQuery 用Ajax 获取Json数据并显示

    万次阅读 多人点赞 2018-11-08 09:18:33
    JQuery 用Ajax 获取Json数据并显示 JQuery: &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(function(){ $(':input:eq...
  • ajax接收json 返回数据在error里面

    千次阅读 2018-06-22 17:24:13
    jsp页面请求:已经成功接收到信息了,但是返回的数据时在error里面.后台也没问题,此方法模拟数据: @RequestMapping(value = "phone/home/find",method=RequestMethod.POST) @ResponseBody public...
  • 今天小编就为大家分享一篇Layui数据表格 前后端json数据接收的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一、前后端发送与接收json数据 前端代码 function pay(data) { //将数据按json格式存放 var info = {"orderId":data}; $.ajax({ url: "/testOrder", data: JSON.stringify(info),//将数据转化为json格式 ...
  • 主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
  • 本小节,将重点学习JSON对象、JSON数组以及如何在Ajax中传递JSON数据。 JSON简介 (1)定义JSON对象和JSON数组 ①JSON对象 a.定义JSON对象 语法: 在JavaScript中,JSON对象是用大括号括起来,包含了多组属性。每个...
  • 在jquery的ajax中,如果没加contentType:"application/json",那么data就应该对应的是json对象,反之,如果加了contentType:"application/json",那么ajax发送的就必须是字符串。为什么呢?contentType参数指定的...
  • 前台直接在ajax --data中将数据定义;ajax 的格式 $(function(){ $("#bt1").click(function(){ var data = "test123"; alert("test"); $.ajax({ type: "GET", url: "main/list1.do", ...
  • AJAXJSON数据,java后台controller接收

    千次阅读 2019-09-09 10:56:20
    //第一种,整一个对象,ajax传参的地方需要使用JSON.stringify(data)。 var data = { "xxxx":xxxx, "xxxx":xxxx, "xxxx":xxxx, "xxxx":xxxx } $.ajax({ type : "post", url : "/repair/start",...
  • ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 if (dataType == "SearchCustomer") { int ID; if (Int32.TryParse(CustomerID, out ID)) { string s = GridComputer.GridCustomer.getCustomer(1...
  • jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考...
  • AJAX向后端发送一个请求并携带有参数,后端处理请求并把数据转化为JSON字符串返回给AJAXAJAX获取值显示在页面 url:请求地址 type:请求方式,GET、POST data:要携带的数据,多个数据用逗号隔开 success: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,683
精华内容 27,873
关键字:

ajax接收json数据