【Ajax】jQuery中Ajax的使用

最新推荐文章于 2024-07-15 22:52:27 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量414

点赞数

分类专栏： Ajax jQuery 学习笔记文章标签： Ajax 异步操作级联列表 jQuery

本文链接：https://blog.csdn.net/m0_47015897/article/details/124104610

版权

学习笔记同时被 3 个专栏收录

43 篇文章 8 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

【Ajax】jQuery Ajax的使用

简介：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接受的数据更新到DOM对象。

1、$.ajax()

$.ajax()是jQuery中Ajax请求的核心方法，所欲的其他方法都是在内部使用此方法。
语法：

$.ajax({name: value, name: value, …})

说明：参数是JSON格式的数据，包含请求方式，数据，回调方法等
async：布尔值，表示请求是否异步处理。默认是tru。
contentType：发送数据到服务器时所使用的内容类型。默认是：

“application/x-www-form-urlencoded”
data：规定要发送到服务器的数据，可以是：string，数组，多数是json
dataType：期望从服务器响应的数据类型。jQuery从xml，json，text，html这些中测试最可能的类型

“xml” - 一个XML文档

“html” - HTML作为纯文本

“text” - 纯文本字符串

“json” - 以JSON运行响应，并以对象返回
error(xhr, status, error)：如果请求失败要运行的函数，其中xhr、status、error是自定义的形参名（其中xhr为XMLHttpReuqest对象）
success(result, status, xhr)：当请求成功时运行的函数，其中result，status，xhr是自定义的形参名（其中xhr为XMLHttpReuqest对象）
type：规定请求的类型（GET或POST等），默认是GET，get、post不用区分大小写
url：规定发送请求的URL

2、$.get()

$.get()方法使用HTTP GET请求从服务器加载数据
语法：

$.get(url, data, function(data, status, xhr), dataType)
url：必选，规定需要请求的URL
data：可选，规定联通请求发送服务器的数据
function(data, status, xhr)可选，当请求成功时运行的函数。data，status，xhr是自定义形参名。

data - 包含来自请求的结果数据

status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）

xhr - 包含XMLHttpRequest对象
dataType：可选，规定预期的服务器响应的数据类型。默认的，jQuery会智能判断。可能的类型：

“xml” - 一个XML文档

“html” - HTML作为纯文本

“text” - 纯文本字符串

“json” - 以JSON运行响应，并以对象返回

3、$.post()

$.post()方法使用HTTP POST请求从服务器加载数据。
语法：$ $. p o s t (U R L, d a t a, f u n c t i o n (d a t a, s t a t u s, x h r), d a t a T y p e) ，参数同$ $.get()

4、应用实例

（1）简介与注意事项

简介：该案例运行时如下图所示，选择省会名称会自动通过异步操作得到对应的城市列表。
注：由于本文主要用于解释异步操作在此案例中的作用，故数据库连接部分代码不再展示。
数据库中存在两个表，表结构如下：
- city
- province
项目目录结构(各文件作用不再赘述)

（2）主要源码

CityServlet.java

package com.Etui.controller;

import com.Etui.dao.CityDao;
import com.Etui.entity.City;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.cj.xdevapi.JsonArray;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "CityServlet", value = "/province/city")
public class CityServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String json = "";
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        CityDao dao = new CityDao();

        String provinceId = request.getParameter("provinceId");
//        System.out.println(provinceId);

        // 根据省id查询对应省所包含的城市
        List<City> citys = dao.findForId(provinceId);
//        System.out.println(citys.toString());

        // 将查询结果转换为JSON格式
        ObjectMapper om = new ObjectMapper();
        json = om.writeValueAsString(citys);
//        System.out.println("CityServlet => " + json);

        // 将json格式的数据响应给前端页面
        out.print(json);

    }
}

ProvinceServlet.java

package com.Etui.controller;

import com.Etui.dao.ProvinceDao;
import com.Etui.entity.Province;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "ProvinceServlet", value = "/index")
public class ProvinceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ProvinceDao dao = new ProvinceDao();
        // 查询所有省会名称并存入数组中
        List<Province> provinceList = dao.findAll();
        // 将数据转发给前端页面
        request.setAttribute("provinceList", provinceList);
        request.getRequestDispatcher("cascade.jsp").forward(request, response);
    }
}

cascade.jsp(主要的异步代码在此处)

<%@ page import="java.util.List" %>
<%@ page import="com.Etui.entity.Province" %><%--
  Created by IntelliJ IDEA.
  User: 34162
  Date: 2022/4/11
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script type="text/javascript" src="./js/jQuery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // $("#province");
            $("#province").change(function () {
                // console.log($("#province").val());
                var provinceId = $("#province").val();
                if(provinceId !== "" && provinceId !== null) {
                    console.log(provinceId);
                    // 通过异步操作获取城市下拉列表
                    $.ajax({
                      type: "get",
                      url: "/myWeb/province/city",
                      data: {
                        "provinceId": provinceId
                      },
                      success: function (result) {
                          // 先清除原有的元素，再添加新的元素
                          $("#def").attr("disabled", true);
                          $("#city").html("<option value='' disabled>请选择...</option>");

                          console.log(result === "[]");
                          if(result === "[]") {
                              $("#city").html("<option value='' >无数据...</option>");
                          } else {
                              var jsonObj = eval("(" + result + ")");
                              // 遍历JSON对象，并加载市下拉列表
                              for (var i in jsonObj) {
                                  // console.log(jsonObj[i].name);
                                  $("#city").append("<option value="+ jsonObj[i].id +">" + jsonObj[i].name + "</option>");
                              }
                          }
                      },
                      contentType: "json"
                    });
                } else {
                    $("#city").html("<option value='' >无数据...</option>");
                    console.log("空值");
                }
            });
        });
    </script>
</head>
<body>
<%
    // 读取省会名称数组
    List<Province> provinceList = (List<Province>) request.getAttribute("provinceList");
%>
<table>
    <tr>
        <td>省会</td>
        <td>
            <select name="province" id="province">
                <option value="" id="def">请选择...</option>
                <% for(int i=0; i< provinceList.size(); i++) { %>
                <option value="<%= provinceList.get(i).getId() %>"><%= provinceList.get(i).getName() %></option>
                <% } %>
            </select>
        </td>
    </tr>
    <tr>
        <td>城市</td>
        <td>
            <select name="city" id="city">
                <option value="">请选择...</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>

（3）运行结果

请添加图片描述

Over！

Etui۹(･༥･´)و ̑̑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Ajax】jQuery中Ajax的使用

【Ajax】jQuery Ajax的使用简介：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接受的数据更新到DOM对象。1、$.ajax()$.ajax()是jQuery中Ajax请求的核心方法，所欲的其他方法都是在内部使用此方法。语法：$.ajax({name: value, name: value, …})说明：参数是JSON格式的数据，包含请求
复制链接

扫一扫

专栏目录