jquery入门案例

Posted 2021-02-06 richardwlee

目录

• jquery入门
  • 1.jQuery简介
    • jQuery介绍
    • jQuery优点
    • jQuery格式
  • 2.一个简单的Demo
    • 需求
    • 方法介绍
    • 代码

jquery入门

1.jQuery简介

jQuery介绍

• jQuery就是一个框架，是一个js库。封装了ajax的相关代码，使得代码编写能更加简单

jQuery优点

• 能用更少的代码做更多的事情

jQuery格式

$(这里面是选择器) . 各种方法

2.一个简单的Demo

需求

• 点击超链接或者是一个按钮，能够从服务器响应数据，并更改文本框中的内容。

方法介绍

load() 方法的语法：

$(selector).load(URL,data,function(response,status,xhr));

参数	解释
selector	选择器
URL	必须的参数，需要访问的地址
data	可选， 规定连同请求发送到服务器的数据
function(response,status,xhr)	可选，当需要执行方法的时候加上这个参数。 可选 response - 包含来自请求的结果数据（就是服务器响应的） 可选 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） 可选xhr - 包含 XMLHttpRequest 对象

代码

• jsp的页面设置，下面是需要改的text

<h3><a href="#" onclick="load()">使用JQuery的load方法</a></h3>
<h3><input type="button" value="使用JQuery的load方法" onclick="load()"/></h3>
<input type="text" name="text01" id="aaa" />

• jquery代码

//导入js库，我放在web/js/jquery-3.3.1.js
<script src = "js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function load() {
        //load方法访问的是DemoServlet，得到responseText（服务器响应的）
        $("#aaa").load("DemoServlet",function (responseText) {
            //对id为aaa的容器值设定为responseText
            $("#aaa").val(responseText);
        });
    }
</script>

• servlet代码

response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("你的外卖!");