json学习1.0

最新推荐文章于 2023-09-12 17:21:44 发布

zhoucong92

最新推荐文章于 2023-09-12 17:21:44 发布

阅读量394

点赞数 1

分类专栏：前端学习文章标签： json ajax jquery javascript

本文链接：https://blog.csdn.net/zhoucong92/article/details/52091659

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

服务器与html的数据传递第一个想到的是用xml 利用里面的父节点来进行索引。后来老板推荐使用了json,对于json第一反应就是便捷，写代码不需要像xml有那么多的重复代码。

学习json用于服务器与html的数据传输 jquery里面有个getJSON()方法可以获取

如何将它们综合起来运用html +javascript+jquery

感觉还是边做边实际做东西效果明显些

这个好像还是比较高级的

学习 AJAX

参考网址如下：

http://www.w3school.com.cn/ajax/index.asp

通过AJAX改变内容感觉用jquery的text内容就可以做

例子如下参考网址的AJAX实例就是文本内如何换行还没想到如何做

js代码

$(document).ready(function loadXMLDoc(){
    $("#cbtn").click(function(){
        $("#myDiv").text("AJAX is not a programming language." +
           "It is just a technique for creating better and more interactive web applications.");
    });

});

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jquery-3.1.0.min.js"></script>
    <script src="ajax.js"></script>
</head>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button  id="cbtn" type="button" οnclick="loadXMLDoc()">Change Content</button>

</body>
</html>

现在利用AJAX来实现功能呢

创建一个test.txt

AJAX is not a programming language
It is just a technique for creating better and more interactive web applications
再创建一个ajax.js
$(document).ready(function(){
    $("button").click(function(){

        $.ajax({url:"test.txt",success:function(result){
            $("#myDiv").html(result);$("#p2").before("hello");
        }});
       
    });


});
建立一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jquery-3.1.0.min.js"></script>
    <script src="ajax.js"></script>
</head>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button  id="cbtn" type="button" >Change Content</button>

</body>
</html>

两种方式实现那个例子 利用ajax是比较方便，txt里面可以写很多数据