jQuery中的ajax的使用

最新推荐文章于 2024-10-31 20:37:20 发布

止落

最新推荐文章于 2024-10-31 20:37:20 发布

阅读量270

点赞数

分类专栏： Ajax 文章标签： jquery ajax

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jquery对ajax做了很多的封装，使得ajax使用起来非常的方便，省去了很多代码。

1. 前台代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Json</title>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <br>
    <br>
    <input type="button" value="JsonStr" onclick="jsonStr()" />
    <br>
    <br>
    <table>
        <tr>
            <td>username</td>
            <td><input id="username"></td>
        </tr>
        <tr>
            <td>id</td>
            <td><input id="id"></td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <input type="button" value="JsonArr" onclick="jsonArr()" />
    <br>
    <br>
    <table border="1" bordercolor="red">
        <caption>Json Array</caption>
        <thead>
            <tr>
                <th>Username</th>
                <th>Id</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>
</body>
<script type="text/javascript">
    // json字符串处理方法
    function jsonStr() {

        $.ajax({
            url : "jsonStr",
            dataType : "json",
            success : function(data) {
                $("#username").val(data.name);
                $("#id").val(data.id);
            }
        });
    }

    // json数组处理方法
    function jsonArr() {

        $.ajax({
            url : "jsonArr",
            dataType : "json",
            success : function(data) {
                // 创建代码片段，用于存放表格行
                var oFragment = document.createDocumentFragment();

                // 根据json数组长度，产生行数据
                for (var i = 0; i < data.length; i++) {
                    var trObj = document.createElement("tr");
                    trObj.innerHTML = "<td>" + data[i].name + "</td><td>"
                            + data[i].id + "</td>";
                    oFragment.appendChild(trObj);
                }

                // 将行数据添加在表格的tBody部分
                $("#tb").html(oFragment);
            }
        });
    }
</script>
</html>

2. 代码讲解

1 使用jQuery的第一步，便是引入jQuery库，这里我将jQuery库放在了项目根目录下面的js文件夹下面。

<!-- 引入jQuery库 -->
<script type="text/JavaScript" src="js/jquery.js"></script>

2 json字符串处理方法

// json字符串处理方法  
    function jsonStr() {  
        $.ajax({  
            url: "jsonStr",  
            dataType: "json",  
            success: function(data) {  
                $("#username").val(data.name);  
                $("#id").val(data.id);  
            }  
        });  
    }

3 jQuery中，我们无需再去new XMLHttpRequest()，也无需再去关注浏览器间的兼容问题，这里jQuery已经帮我们处理好了，字节使用 $.ajax 就可以了；

在回调函数中，老式的写法中，需要写：

xhr.onreadystatechange = function(data) {  
         if (xhr.readyState == 4 && xhr.status == 200) {  
                ....
            }

但是 jQuery 的写法中，一个 success： function(data) {...}就可以了，是否简便了许多呢？附上老式的ajax请求代码

function jsonStr() {  
    /** 老式写法 
        var xhr = new XMLHttpRequest(); 
        xhr.open("get", "jsonStr"); 
        xhr.onreadystatechange = function(data) { 
            if (xhr.readyState == 4 && xhr.status == 200) { 
                // 将json字符串转换为json对象 
                var obj = eval("(" + data.target.responseText + ")"); 
                document.getElementById("username").value = obj.name; 
                document.getElementById("id").value = obj.id; 
            } 
        }; 
        xhr.send(null); 
    */  
        $.ajax({  
            url: "jsonStr",  
            dataType: "json",  
            success: function(data) {  
                $("#username").val(data.name);  
                $("#id").val(data.id);  
            }  
        });  
    }