Ajax全接触(四) jQuery中的AJAX

最新推荐文章于 2025-08-16 06:08:09 发布

原创最新推荐文章于 2025-08-16 06:08:09 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #string #class

Ajax 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个员工管理系统示例介绍如何使用jQuery的AJAX方法实现客户端与服务器间的异步数据交互。包括员工信息查询与新建功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法|

Query.ajax([*settings*])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。
type	类型：String
默认值: “GET”)。请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url	类型：String
默认值: 当前页地址。发送请求的地址。
data	是一个对象，连同请求发送到服务器的数据
dataType	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，一般我们采用json格式，可以设置为json
success	是一个方法，请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
error	是一个方法，请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1 {
    font-size: 28px;
    line-height:1.7;
}
</style>
</head>

<body>

    <h1>员工查询</h1>

    <label>请输入员工编号：</label>
    <input type="text" id="keyword" />
    <button id="search">查询</button>
    <p id="searchResult"></p>

    <h1>员工新建</h1>
    <label>请输入员工姓名：</label>
    <input type="text" id="staffName" /><br>
    <label>请输入员工编号：</label>
    <input type="text" id="staffNumber" /><br>
    <label>请选择员工性别：</label>
    <select id="staffSex">
    <option>女</option>
    <option>男</option>
    </select><br>
    <label>请输入员工职位：</label>
    <input type="text" id="staffJob" /><br>
    <button id="save">保存</button>
    <p id="createResult"></p>

    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $("#search").click(function() {
                $.ajax({
                    type: "GET",
                    url: "serverjson2.php?number=" + $("#keyword").val(),
                    dataType: "json",
                    success: function(data) {
                        if (data.success) {
                            $("#searchResult").html(data.msg);
                        } else {
                            $("#searchResult").html("出现错误：" + data.msg);
                        }
                    },
                    error: function(jqXHR) {
                        alert("发生错误：" + jqXHR.status);
                    },
                });
            });

            $("#save").click(function() {
                $.ajax({
                    type: "POST",
                    url: "serverjson.php",
                    data: {
                        name: $("#staffName").val(),
                        number: $("#staffNumber").val(),
                        sex: $("#staffSex").val(),
                        job: $("#staffJob").val()
                    },
                    dataType: "json",
                    success: function(data) {
                        if (data.success) {
                            $("#createResult").html(data.msg);
                        } else {
                            $("#createResult").html("出现错误：" + data.msg);
                        }
                    },
                    error: function(jqXHR) {
                        alert("发生错误：" + jqXHR.status);
                    },
                });
            });
        });
    </script>
</body>
</html>