掌握jQuery与Ajax实现动态网页交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42437253/article/details/146895982

掌握jQuery与Ajax实现动态网页交互

背景简介

在现代网页开发中，与服务器的数据交互变得越来越重要。JavaScript库jQuery以及Ajax技术的出现，大大简化了这一过程。本章节内容将引导我们深入了解如何通过jQuery和Ajax实现网页的动态内容加载和交互。

使用jQuery和外部CDN

首先，通过Google CDN加载jQuery库可以加快页面的加载速度并提高可靠性。示例中使用了jQuery的 $(document).ready 函数确保在文档完全加载后执行脚本。

示例代码解析

<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() {
    $.ajax({
        type: "get",
        url: window.location.pathname,
        dataType: "text",
        success: function(data) {
            $("p").html("Ajax loaded content");
        },
        failure: function() {
            $("p").html("An error has occurred making the request");
        }
    });
});
</script>

jQuery简化Ajax操作

jQuery提供的 .load() 函数使得加载文件内容变得更为简洁。示例15-12通过更少的代码实现了相同的功能。

示例代码解析

<script type="text/javascript">
$(document).ready(function() {
    $("#generated_content").load("animals.xml");
    $("#generated_content").wrap("<pre>");
});
</script>

使用$.get和$.post进行GET和POST请求

除了 $.ajax ，jQuery还提供了 $.get 和 $.post 函数，用于简化GET和POST请求。示例15-13展示了如何使用 $.get 来加载XML数据。

示例代码解析

$.get("animals.xml", function(data){
    var message = "";
    var names = data.getElementsByTagName("name");
    for(i=0; i < names.length; ++i){
        message += names[i].firstChild.nodeValue + "<br/>";
    }
    $("#generated_content").html(message);
}, "xml");

处理JSON数据

JSON已经成为网络数据交换的标准格式之一。示例15-15使用 $.getJSON 和 $.each 函数处理从PHP脚本返回的JSON数据。

示例代码解析

$.getJSON("json_example.php" , function(data){
    $.each(data, function(continent, animals){
        var message = "<strong>" + continent + "</strong><br/>";
        for(j=0;j<animals.length;++j){
            message += animals[j] + ", ";
        }
        message = message.trim();
        message = message.substring(0, message.length - 1);
        $("#generated_content").append("<p>" + message + "</p>");
    });
});

通过Ajax发送数据到PHP脚本

示例15-16和15-17展示了如何通过Ajax向PHP脚本发送数据，并处理返回的结果。

示例代码解析

$("#predator").click(function(){
    $("#response").load("predator_prey.php?type=predator");
});

$("#prey").click(function(){
    $("#response").load("predator_prey.php?type=prey");
});