PHP编程实战15-12

<!--PHP编程实战-->
<!--JSON & Ajax -->
<!--15-12-->
<!--使用jQuery.load()函数加载文件 更精炼-->
<html>
<head>
    <title>Loading Plain Text with jQuery</title>
    <style type="text/css">
        #generated_content {
            border: 1px solid black;
            width: 300px;
            background-color: #dddddd;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                $("#generated_content").load("animals.xml");
                $("#generated_content").wrap("<pre>");
            }
        )
    </script>
</head>
<body>
<p><strong>Ajax grabbed plain text:</strong></p>

<div id="generated_content"> </div>
</body>
</html>

xml数据文件

<!--animals.xml-->
<animals>
    <dogs>
        <dog>
            <name>snoopy</name>
            <color>brown</color>
            <breed>beagle cross</breed>
        </dog>
        <dog>
            <name>jade</name>
            <color>black</color>
            <breed>lab cross</breed>
        </dog>
    </dogs>
    <cats>
        <cat>
            <name>teddy</name>
            <color>brown</color>
            <breed>tabby</breed>
        </cat>
    </cats>
</animals>

重点

  • jQuery的load函数执行GET请求,并使用"智能猜测"返回纯文本.
  • jQuery的wrap(怀疑为load才对)函数在元素的内容周围放置了标记,这允许将已加载的数据放在上面的<pre>...</pre>中.
  • 这里没有使用$.ajax()方法,而是在jQuery对象上直接调用了load
    方法.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,742评论 18 503
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,905评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,206评论 0 2
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,662评论 0 2
  • 做为一个逛【简书】的人,我相信你一定是一个很注重品味,有文艺情怀,甚至有些小众喜好的人。 所以,像我们这样的...
    维维豆奶vi阅读 7,077评论 8 16