精华内容
下载资源
问答
  • Ajax获取显示Json数据的一种方法
    2021-06-25 05:54:09

    本文主要是在java中用json与前台Ajax数据交互

    1、首先前台用Ajax,其中注意dataType一定要选择json方式,Action成功返回给页面的Json内容是这样的[{"number":"V006","names":"LiLei"}],可见comment['names']对应"names":"LiLei",comment['number']对应"number":"V006"。

    $.ajax({

    type: "post",

    url:'apply/mystudent.action?',

    cache: false,

    dataType : "json",

    success: function(data){

    $.each(data, function(commentIndex, comment){

    alert("姓名"+ comment['names']);

    alert("学号"+comment['number']);

    });

    }

    });

    2、Ajax的URL指向在java的action中mystudent方法,返回的list其实是一个对象Student,包括了names和nunmber字段

    public String mystudent() throws Exception{

    List list=priceService.query();//调用接口实现类

    this.jsonUtil(list);

    return null;

    }

    3、action页面专门写一个方法jsonUtil来做为json方法

    // 调用json工具方法,站群,传入参数alist

    public void jsonUtil(Object accountlist) throws Exception {

    HttpServletResponse response = ServletActionContext.getResponse();

    log.info("JSON格式:" + accountlist.toString());

    String returnJson = JsonConvert.returnJson(accountlist);

    response.setCharacterEncoding("utf-8");

    response.getWriter().println(returnJson);

    }

    4、我用的是一种比较新的json包jackson

    import java.io.StringWriter;

    import org.codehaus.jackson.map.ObjectMapper;

    public class JsonConvert {

    static String jsonStr;

    public static String returnJson(Object object) throws Exception{

    ObjectMapper objectMapper = new ObjectMapper();

    StringWriter stringWriter = new StringWriter();

    objectMapper.writeValue(stringWriter, object);

    jsonStr = stringWriter.toString();

    return jsonStr;

    }

    }

    相关报道:

    刚好一个月之前由于本站经营了一年后还是没有什么流量,于是本人就怀疑是不是我的网站的主题有问题,以前做的是女性娱乐类的网站,但就目前来说这样的网站实在太多了,竞争十分激烈。因此我就把网站改版为现在,这次改版可以说是彻底的改版,不管是内容还是 更多

    观察者模式。多个观察者可以同时监听同一个主题,当主题有状态变更时,会通知所有的观察者进行更新。 更多

    更多相关内容
  • ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 if (dataType == "SearchCustomer") { int ID; if (Int32.TryParse(CustomerID, out ID)) { string s = GridComputer.GridCustomer.getCustomer(1...
  • JQuery 用Ajax 获取Json数据并显示

    千次阅读 2020-11-07 18:28:31
    JQuery: <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ $(':input:eq(0)').click(function(){ $.ajax({ url: 'data.json',

    JQuery:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script>
            $(function(){
                $(':input:eq(0)').click(function(){
                    $.ajax({
                        url: 'data.json',
                        type: 'get',
                        dataType: 'json',
                        success: function(datas){
                            var tbhtml = "<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";
                            for(var i = 0;i<datas.length;i++){
                                    tbhtml+="<tr><td>"+datas[i].name+"</td><td>"+datas[i].age+"</td><td>"+datas[i].sex+"</td></tr>";
                            }
    
                            $('table:eq(0)').html(tbhtml);
                        }
                    })
                })
            })
            </script>
    
     
    

    HTML:

    <center>
           <table border="1px solid">
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                      </tr>
                </table>
                <input type="button" value="加载数据" />
            </center>
    

    Json:

    [
        {
            "name": "zhangsan",
            "age": 18,
            "sex": "man"
        },
        {
            "name": "lisi",
            "age": 17,
            "sex": "man"
        },
        {
            "name": "wangwu",
            "age": 16,
            "sex": "man"
        }
    ]
    

    个人实现:

     <!-- 用jquery实现数据的显示 -->
        <script>
            $(function() {
                $.ajax({
                    url: "http://www.test.test/vue学习/vue第3天/mysql.php",
                    dataType: "json",
                        success: function(data) {
                            console.log(data);
                            var tbhtml = "<table border='1px' cellspacing='0'><tr><th>id:</th><th>user_id</th></tr>";
                            for(var i = 0;i<data.length;i++){
                                tbhtml += "<tr><td>"+ data[i].id+"</td><td class='user_id'>"+data[i].user_id+"</td></tr>";
                            }
                                tbhtml += "</table>";
                                $("#project_list").html(tbhtml);
                            // }
                        }
                });
            });
        </script>
    

    在这里插入图片描述

    转载地址:https://blog.csdn.net/xiaohongit/article/details/83855657

    链接: JQuery 用Ajax 获取Json数据并显示.

    展开全文
  • 主要介绍了如何使用ajax读取Json中的数据,如何使用AJAX读取Json数组里面的数据,感兴趣的小伙伴们可以参考一下
  • Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,...
  • $.ajax({ type: 'post', url: '/XXX', dataType: 'json', success:function(data){ var item; $.each(data,function(i,result){ item= <tr><td>+result['name']+</td><td>+result['age']+</td></tr>; $('.table')....
  • 今天小编就为大家分享一篇ajax动态加载json数据并详细解析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 这一个可能对大佬来说是...首先创建一个json文件名称为:“学生成绩.json” 下面是json文件: { "score":[ {"姓名":"张三","性别":"男","分数":90}, {"姓名":"李四","性别":"女","分数":98}, {"姓名":"王五

    这一个可能对大佬来说是比较简单的,哈哈欢迎指正,咋也是刚学,老师布置的小作业,希望能帮助到大家(如果大家是写作业的话,建议不要直接复制上去,不然可能就会有挺多雷同,比较csdn是一个比较广为人知的平台,所以建议记得自己改一改哪怕是文字信息改改也行),本程序再HbuilderX上面可以运行的,因为HuilderX里面有内置服务器,使用DW的话就需要建立服务器了,这个我也不太懂,大家可以在其他blog里面找找

    首先创建一个json文件名称为:“学生成绩.json”

    下面是json文件:

    {
    	"score":[
    		{"姓名":"张三","性别":"男","分数":90},
    		{"姓名":"李四","性别":"女","分数":98},
    		{"姓名":"王五","性别":"男","分数":88},
    		{"姓名":"赵六","性别":"男","分数":89}
    		]
    }

    下面是html文件:(就是下面不是有三中方法来进行添加到表格中去吗,建议还是都试试)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>使用Ajax读去json中的内容</title>
    		<style type="text/css">
    			h3{
    				color: #fF5000;
    				margin-left: 50px;
    			}
    			div{
    				margin-left: 650px;
    			}
    			table{
    				border-spacing: 0px;
    			}
    			th,td{
    				text-align: center;
    				padding-left: 20px;
    				padding-right: 20px;
    				padding-top: 10px;
    				padding-bottom: 10px;
    			}
    			th{
    				background-color: khaki;
    			}
    			button{
    				margin-top: 10px;
    				margin-left: 50px;
    				padding-top: 5px;
    				padding-bottom: 5px;
    			}
    		</style>
    		<script src="../jQuery/jquery-3.6.0.js" type="text/javascript"></script>
    		<script type="text/javascript">
    			$(document).ready(function(){
    				$("#button").click(function(){
    					$.ajax({
    						type: "get",
    						url: "../json/学生成绩.json",
    						dataType: "json",
    						success: function(res){
    							var list=res.score;
    							for(var i=0;i<list.length;i++){
    								//一、下面是使用html语言来实现利用获取的数据创建表格
    								/*var tr=document.createElement("tr");
    								var name=document.createElement("td");
    								var sex=document.createElement("td");
    								var grade=document.createElement("td");
    								name.innerHTML=list[i].姓名;
    								sex.innerHTML=list[i].性别;
    								grade.innerHTML=list[i].分数;
    								tr.appendChild(name);
    								tr.appendChild(sex);
    								tr.appendChild(grade);
    								tbody.appendChild(tr);*/
    								
    								//二、下面的是使用jquery来利用获取的数据创建表格
    								//1.根据链式写法来写,只需要一句就可以完成一行的td填充,不利于理解,如下:
    								//$("#tbody").append($("<tr></tr>").append($("<td>"+list[i].姓名+"</td>")).append($("<td>"+list[i].性别+"</td>")).append($("<td>"+list[i].分数+"</td>")));
    								//不使用链式写法,同样也能写出来只是会创建更多一些形参,但是利于理解,如下:
    								var $tbody=$("#tbody");//获取tbody的jquery对象
    								var $tr=$("<tr></tr>");//新建一个tr结点以便于包括td结点和和将其一同添加到tbody结点下
    								var $td1=$("<td>"+list[i].姓名+"</td>");//根据获取到的json数据设置新建td结点并且给td内部文本初始化
    								$tr.append($td1);//把新建的td结点放置在tr下面
    								$tbody.append($tr);//将包含有td的tr放在tbody下面
    								//以下同理
    								var $td2=$("<td>"+list[i].性别+"</td>");
    								$tr.append($td2);
    								$tbody.append($tr);
    								var $td3=$("<td>"+list[i].分数+"</td>");
    								$tr.append($td3);
    								$tbody.append($tr);
    							}
    							$("#tbody tr:odd").css("background-color","lightgrey");//选中tr,将奇数tr颜色设置为轻灰色
    							//document.getElementsByTagName("button")[0].remove();
    							$("button").remove();//点击过后就让按钮小事,防止多次点击
    						}
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div>
    			<h3>使用Ajax读取json文件</h3>
    			<table border="1">
    				<thead>
    					<tr>
    						<th>姓名</th> <th>性别</th> <th>web实战分数</th>
    					</tr>
    				</thead>
    				<tbody id="tbody">
    				</tbody>
    				<tfoot></tfoot>
    			</table>
    			<button type="button" id="button">使用Ajax读取json文件中的数据</button>
    		</div>
    	</body>
    </html>
    

    小生不才,写csdn一是为了记录,二是分享一些好的资源

    展开全文
  • json是一种取代xml的数据结构,和xml相比,它更小巧但描述能力却很强,网络传输数据使用流量更少,速度更快。 json就是一串字符串,使用下面的符号标注。 {键值对} : json对象 [{},{},{}] :json数组 “” :双引号...
  • 主要介绍了ThinkPHP中使用ajax接收json数据的方法,包括了前台js代码与对应的PHP处理代码,非常具有实用价值,需要的朋友可以参考下
  • 本文实例讲述了jQuery+ajax读取json数据并按照价格排序。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed]...
  • 今天小编就为大家分享一篇ajax获得json对象数组 循环输出数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 代码如下:$.ajax({ url: ‘这个地址要换成你自己的’, data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加个时间戳,否则会不自动更新数据 dataType: ‘json’, success: function(data) {...
  • 原生ajax处理json格式数据代码实例: 由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的。 但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax...
  • 插件下载地址 http://www.jq22.com/jquery-plugins分页-2-...下载的插件用自带的数据是可以的,但是采用ajax获取json数据的时候会报错,所以我对插件进行了修改,成功实现。这个例子希望大家看懂自己来该,照抄不了。
  • [MVC]bootstrap-table表格ajax获取json数据并分页。
  • ajax获取json数据示例

    2021-05-25 20:40:29
    使用ajax请求数据时,可以先封装ajax function querystring(obj) { var str = ""; for (var arr in obj) { str += arr + "=" + obj[arr] + "&"; } return str.substring(0, str.length - 1); } function ...

    使用ajax请求数据时,可以先封装ajax

    function querystring(obj) {
        var str = "";
        for (var arr in obj) {
            str += arr + "=" + obj[arr] + "&";
        }
        return str.substring(0, str.length - 1);
    }
    
    
    function $ajax({
        method = "get",
        url,
        data,
        success,
        error,
    }) {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (error) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    
        if (method == "get" && data != null) {
            url += "?" + querystring(data);
        }
        xhr.open(method, url, true);
    
        if (method == "get") {
            xhr.send();
        } else {
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
            xhr.send(querystring(data));
        }
    
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    if (success) {
                        success(xhr.responseText);
                    }
                } else {
                    if (error) {
                        error("error" + xhr.status);
                    }
                }
            }
        }
    }
    

    请求的数据book.json

    {
        "data":[
            {
                "name":"first",
                "desc":"1111111111111111"
            },
            {
                "name":"second",
                "desc":"222222222222222"
            },
            {
                "name":"third",
                "desc":"333333333333333"
            }
        ]
    }
    

    两种方法将获取的数据显示在ul中
    两种方式选取一种,另一种运行时删除

    <body>
        <button id="xiazai">下载数据</button>
        <ul id="liebiao">
            <!-- <li>
                <h1>标题:</h1>
                <p>简介:</p>
            </li> -->
        </ul>
        <script src="ajax.js"></script>
        <script>
            window.onload = function() {
                var button = document.getElementById("xiazai");
                var ul = document.getElementById("liebiao");
    
                /* 第一种方式 */
                button.onclick = function() {
                    $ajax({
                        method: "get",
                        url: "data/book.json",
                        success: function(res) {
                            var str = ``;
                            var obj = JSON.parse(res);
                            var arr = obj.data;
                            for(var i = 0;i < arr.length;i ++) {
                                var lobj = arr[i];
                                str += `<li>
                                            <h1>标题:${lobj.name}</h1>
                                            <p>简介:${lobj.desc}</p>
                                        </li>`;
                            }
                            ul.innerHTML = str; 
                        },
                        error: function(mes) {
                            alert(error);
                        }
                    })
                }
    
                /* 第二种方式 */
    
                button.onclick = function() {
                    ul.innerHTML = "";
                    $ajax({
                        method: "get",
                        url: "data/book.json",
                        success: function(res) {
                            var obj = JSON.parse(res);
                            var arr = obj.data;
                            for(var i = 0;i < arr.length;i ++) {
                                var h1 = document.createElement("h1");
                                var p = document.createElement("p");
                                var li = document.createElement("li");
                                h1.innerHTML = arr[i].name;
                                p.innerHTML = arr[i].desc;
                                li.appendChild(h1);
                                li.appendChild(p);
                                ul.appendChild(li);
                            }
                        },
                        error: function(error) {
                            alert(error)
                        }
                    })
                }
                /* 第二种结束 */
            }
        </script>
    </body>
    
    展开全文
  • $.ajax({ type : "POST", url : js_path + "/maintainAdd/add", data : JSON.stringify(madd_data.editMaintain), contentType : "application/json", dataType : "json", complete:function(msg) { layer....
  • ECharts通过ajax动态获取json数据实现各种选择条件的多图表,引入的json文件内的结构具体根据需要随时改动,可以支持任意多的图表实现!关键是理解这种实现思维,其余的实现各种图表就根据这种思想随意发挥即可,...
  • 这次给大家带来ajax读取Json数据的方法,ajax读取Json数据的注意事项有哪些,下面就是实战案例,一起来看一下。本文给大家分享一下,如何使用ajax读取Json中的数据。一、基础知识什么是json?JSON 指的是 JavaScript...
  • 关键方法:sort()用于对数组的元素进行排序。 return a.num-b.num是升序; return b.num-a.num;... 代码如下: $.post(“json.json”,function(data){ data.sort(function(a,b){return a.... } },”json”) json数据: [ {
  • 首先,Ajax请求数据,(用的是Jquery的Ajax) 代码如下: [removed] $(function(){ $(‘#test’).click(function(){ $.ajax({ url:’__APP__/Article/jsonTest’, type:’post’, success:function(data){ var item;...
  • 服务端PHP读取MYSQL数据,转换成JSON数据,传递给前端Javascript,操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识,...
  • 有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现。下面就使用jQuery读取music.txt文件中的JSON数据格式信息。首先,music.txt中的内容如下:[{"optionKey":"1"...
  • jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。 代码示例如下: 代码如下: $(‘#send’).click...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 168,127
精华内容 67,250
关键字:

ajax获取json数据并显示