jquery 简单使用和发送 ajax 异步请求

最新推荐文章于 2023-06-01 14:10:57 发布

放气

最新推荐文章于 2023-06-01 14:10:57 发布

阅读量178

点赞数

分类专栏： Java 相关文章标签： jquery ajax java

本文链接：https://blog.csdn.net/liu1shi/article/details/112290403

版权

Java 相关专栏收录该内容

86 篇文章 0 订阅

订阅专栏

在这里插入图片描述

jquery 的简单使用。需要引入 js 文件。

jquery 获取 select 标签、 input （radio）标签的选中状态。
注意过滤器加空格代表从子类中找，不加空格是从自身查找。


<!DOCTYPE html>
<html>
<head>
	<title>title</title>
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>

	<script type="text/javascript">
		
		// 相当于window.onload
		$(function () {
			
			//添加点击事件
			$("button").click(function () {
				// 过滤器中加空格代表从子类中找
				console.log("select: " + $("select :selected").val());
				// 不加空格从自身找
				console.log("radio: " + $("input:checked").val());

				$("select :selected").text("选中了");

				$("select [selected != 'selected']").text("未选中");
			})

		})

	</script>


</head>
<body>

	<select>
		<option value="1">1</option>
		<option value="2" selected="selected">2</option>
		<option value="3">3</option>
	</select>
	<br>
	<input type="radio" name="sex" value="1">
	<input type="radio" name="sex" checked="checked" value="2">
	<input type="radio" name="sex" value="3">

	<br>
	<button>点击</button>

</body>
</html>

使用 jquery 发送 ajax 异步请求。
IDEA 的 jsp 工程代码。


// 服务端端部分代码，父类 DispacherServlet 在前文封装Servlet 工具类中找

@WebServlet("/AjaxServlet/*")
public class AjaxServlet extends DispacherServlet {

    public void hello(HttpServletRequest request, HttpServletResponse response) {

        // 接收服务端数据 application/x-www-form-urlencoded
        String username = request.getParameter("username");
        String age = request.getParameter("age");
        System.out.println(username + "\t" + age);

        // 响应信息到客户端
        try {
            response.getWriter().write("<html><body><p>Hello</p> <div>Ajax</div></body></html>");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">

      $(function () {
		
		// 绑定事件
        $("#button1").bind("click", function () {

          var param = {
            type: "POST",
            url: "AjaxServlet/hello",
            // data: "username=zs&age=23",
            data: {
              username: "zs",
              age: 23
            },
            // 服务端返回数据的预期类型 text、json、xml等
            dataType: "html",
            headers: {
              "content-type": "application/x-www-form-urlencoded"
            },
            beforeSend: function (XMLHttpRequest) {
              // 发送请求前显示 div2
              $("#div2").show();
              // 发送请求前执行，优先于 headers 设置
              console.log("beforeSend this " + this)
            },
            success: function (data, textStatus) {

              // data 可能是 xmlDoc, jsonObj, html, text, 等等...
              console.log("success textStatus " + textStatus);
              console.log("success data " + data);
              // $("#div1").text(data);
              $("#div1").html(data)

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              // 通常 textStatus 和 errorThrown 之中 只有一个会包含信息
              console.log("error textStatus " + textStatus);
              console.log("error errorThrown " + errorThrown);
            },
            complete: function (XMLHttpRequest, textStatus) {
              // 请求成功或失败都会执行
              $("#div2").hide();
              console.log("complete textStatus " + textStatus);
            }
          }

		  // 发送请求
          $.ajax(param);
        })

      })

    </script>

  </head>
  <body>

    <button id="button1">异步访问AjaxServlet</button>
    <div id="div1" style="border: antiquewhite solid 1px;width: 100px;height: 100px;"></div>
    <div id="div2" style="display: none">转圈圈</div>
  </body>
</html>

放气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 简单使用和发送 ajax 异步请求

jquery 的简单使用。需要引入 js 文件。 jquery 获取 select 标签和 input radio 标签的选中状态。注意过滤器加空格代表从子类中找，不加空格是从自身查找。<!DOCTYPE html><html><head> <title>title</title> <script type="text/javascript" src="../js/jquery-1.7.1.min.js">..
复制链接

扫一扫