使用jQuery实现Ajax请求

最新推荐文章于 2024-07-29 20:46:57 发布

krain.

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量902

点赞数 1

本文链接：https://blog.csdn.net/ccccc_chuang/article/details/107115277

版权

使用jQuery实现Ajax请求的优点

代码实现更加简单，简化了ajax请求
不用考虑Ajax在不同浏览器上的实现不同
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery中提供了三种函数实现Ajax请求

使用前需要先导入jQuery的JS库文件。下载地址：jQuery

$.ajax()

$.ajax({
	  //参数说明
  	  axync: //是一个boolean类型的值，默认为true，表示异步请求
      contentType: //一个字符串，表示浏览器发送到服务器的参数类型json格式：application/json
      data: //可以使用字符串、数组、json，表示请求的参数
      dataType: //表示期望从服务器获取的数据格式，可选：xml、html、text、json
      error: //一个函数，表示请求发生错误时，执行的函数
      success: //表示请求成功时（readystate==2 && status==200）执行的函数
      url: //请求地址
      type: //请求类型 post/get
  })

$.post()
语法格式：

$.post(URL,data,callback);
//URL为请求地址
//data为提交的参数
//callback为请求成功后执行的函数

$.get()
语法格式：

$.get(URL,callback);

实例

实现级联查询功能。运行样例如下，在省份列表框中点击福建省，即可在城市列表框中显示所属的城市。
在这里插入图片描述
前端代码如下（数据库、Servlet需另编写）：

<%--
  Created by IntelliJ IDEA.
  User: cc
  Date: 2020/7/3
  Time: 18:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>获取所有省份到select</title>
    <script type="text/javascript" src="js/jQuery-3.5.1.js"></script>
    <script>

        function doAgax(){
            $.ajax({
                url:"queryProvince",
                dataType:"json",
                success:function (res) {
                    //将数据库省份加入下拉列表之前，先清除列表中的内容
                    $("#province").empty();
                    //循环将
                    $.each(res,function (i,n) {
                        $("#province").append("<option value='"+n.id+"'>"+n.name+"</option>");
                    })
                }
            })
        }

        $(function () {

            //页面中dom加载完毕后直接显示省份
            doAgax();

            // $("#btn").click(function () {
            //     doAgax();
            // })

			//检测省份下拉列表框是否发生变化
            $("#province").change(function () {
                var obj = $("#province>option:selected");

                var proId = obj.val();
				//$.post()方法实现Ajax请求
                $.post("queryCity",{proId:proId},callBack,"json");
            })
        })

        function callBack(res) {
            //清空下拉列表框中的内容
            $("#city").empty();
            $.each(res, function (i,n) {
                $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
            })
        }
    </script>
  </head>
  <body>
    <table border="1px" cellpadding="0" cellspacing="0">
        <tr>
            <td>省份：</td>
            <td>
                <select id="province">
                    <option value="0">请选择...</option>
                </select>
            </td>
            <%--<td><input type="button" id="btn" value="查询"></td>--%>
        </tr>
        <tr>
            <td>城市：</td>
            <td>
                <select id="city">
                    <option value="0">请选择...</option>
                </select>
            </td>
        </tr>
    </table>
  </body>
</html>