精华内容
下载资源
问答
我要提问
  • 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 获取数据并在前台使用简单实例

     2020-11-26 14:05:57
    用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数据并显示.

    收起
    展开全文
    jquery

  • 如何使用ajax读取Json中的数据

     2020-10-22 11:37:26
    主要介绍了如何使用ajax读取Json中的数据，如何使用AJAX读取Json数组里面的数据，感兴趣的小伙伴们可以参考一下
    收起

  • ajax获取json数据为undefined原因分析

     2020-12-12 19:24:28
    Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，...
    收起

  • Ajax返回的json遍历取值并显示到前台的方法

     2021-01-21 12:53:19
    $.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数据并详细解析

     2020-10-18 05:36:45
    今天小编就为大家分享一篇ajax动态加载json数据并详细解析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • 使用Ajax读出json文件来进行一些操作（使用Ajax读取数据，并显示到网页中数据使用文本格式数据使用json格式...

     2021-11-15 22:34:23
    这一个可能对大佬来说是...首先创建一个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一是为了记录，二是分享一些好的资源

    收起
    展开全文
    前端

  • 基于$.ajax()方法从服务器获取json数据的几种方式总结

     2020-11-27 02:15:48
    json是一种取代xml的数据结构，和xml相比，它更小巧但描述能力却很强，网络传输数据使用流量更少，速度更快。 json就是一串字符串，使用下面的符号标注。 {键值对} ： json对象 [{},{},{}] ：json数组 “” ：双引号...
    收起

  • ThinkPHP中使用ajax接收json数据的方法

     2020-10-25 01:12:13
    主要介绍了ThinkPHP中使用ajax接收json数据的方法,包括了前台js代码与对应的PHP处理代码,非常具有实用价值,需要的朋友可以参考下
    收起

  • jQuery+ajax读取json数据并按照价格排序示例

     2021-01-19 19:09:18
    本文实例讲述了jQuery+ajax读取json数据并按照价格排序。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed]...
    收起

  • ajax获得json对象数组 循环输出数据的方法

     2020-10-18 04:49:51
    今天小编就为大家分享一篇ajax获得json对象数组 循环输出数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • jquery教程ajax请求json数据示例

     2020-12-10 05:25:29
    代码如下:$.ajax({ url: ‘这个地址要换成你自己的’, data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加个时间戳，否则会不自动更新数据 dataType: ‘json’, success: function(data) {...
    收起

  • 原生ajax处理json格式数据的实例代码

     2020-11-28 04:09:13
    原生ajax处理json格式数据代码实例: 由于jQuery的出现，原生ajax使用频率也越来越少，这当然是因为jQuery的便利性多导致的。 但是对于原生ajax实现原理的知晓也是非常重要的，下面就改造本板块的一个使用jquery ajax...
    收起

  • ajax获取json数据使用jquery分页插件显示

     2017-06-22 14:47:03
    插件下载地址 http://www.jq22.com/jquery-plugins分页-2-...下载的插件用自带的数据是可以的，但是采用ajax获取的json数据的时候会报错，所以我对插件进行了修改，成功实现。这个例子希望大家看懂自己来该，照抄不了。
    收起

  • [MVC]bootstrap-table表格ajax获取json数据并分页

     2018-03-19 17:35:27
    [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进行Post提交Json数据的方法

     2020-12-09 18:39:53
    $.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数据——最便捷的调用方式.rar

     2020-01-20 01:47:01
    ECharts通过ajax动态获取json数据实现各种选择条件的多图表，引入的json文件内的结构具体根据需要随时改动，可以支持任意多的图表实现！关键是理解这种实现思维，其余的实现各种图表就根据这种思想随意发挥即可，...
    收起

  • ajax读取Json数据的方法

     2021-04-29 04:31:07
    这次给大家带来ajax读取Json数据的方法，ajax读取Json数据的注意事项有哪些，下面就是实战案例，一起来看一下。本文给大家分享一下，如何使用ajax读取Json中的数据。一、基础知识什么是json？JSON 指的是 JavaScript...
    收起

  • ajax返回的json内容进行排序使用sort()方法实现

     2021-01-21 12:13:02
    关键方法：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请求返回的Json格式数据循环输出成table形式

     2020-12-03 07:04:26
    首先，Ajax请求数据，（用的是Jquery的Ajax） 代码如下: [removed] $(function(){ $(‘#test’).click(function(){ $.ajax({ url:’__APP__/Article/jsonTest’, type:’post’, success:function(data){ var item;...
    收起

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

     2020-12-29 18:30:40
    服务端PHP读取MYSQL数据，并转换成JSON数据，传递给前端Javascript，并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识，并...
    收起

  • jQuery中使用Ajax获取JSON格式数据

     2021-06-12 11:48:17
    有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现。下面就使用jQuery读取music.txt文件中的JSON数据格式信息。首先，music.txt中的内容如下：[{"optionKey":"1"...
    收起

  • jquery的ajax异步请求接收返回json数据实例

     2020-12-03 17:45:34
    jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。 代码示例如下： 代码如下: $(‘#send’).click...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 168,127
精华内容 67,250
热门标签
关键字：

ajax获取json数据并显示