AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

什么是jQuery？（下）

2022-04-24 178
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 笔记

$.get()


上面的load()方法，当我们带参数给服务器的时候，就自动转化成post、不带参数的时候就转换成get。$.get()就是指定是get方法

load()方法是使用Jquery对象来调用的，并且调用过后，会把数据自动填充到Jquery对象的标签中间，而$.get()并不是特定的Jquery对象来调用！

$.get(url, [data], [fn], [type])参数和load()是完全类似的，我们在上面的例子中该一下就行了。**

由于$.get()是没有将返回的数据自动填充到标签之中，因此需要手动地添加到指定的标签之中！

$.get(url, function (backData) {
        //得到客户端返回的数据【JS对象】
        $("#time").append(backData);
      });
  • 效果：

7.png


$.post()


$.post()和$.get()是十分类似的，只不过是把请求方式改变了，一般情况下，我们有参数传递给服务器的时候，都是用post方式的。

使用$.post()方法是需要设定编码的，它和load()方法是不一样的！

下面使用检查用户名和密码是否合法的案例来说明这两个方法：

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  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-1.8.2.js"></script>
</head>
<body>
<%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%>
<form>
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td><input type="button" value="检查"></td>
        </tr>
    </table>
    <span id="backData"></span>
</form>
<script type="text/javascript">
    $(":button").click(function () {
        var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();
        //要传送过去的数据必须是JSON格式的
        var sendData = {
            username: $(":text").val(),
            password: $(":password").val()
        };
        $.post(url, sendData, function (backData) {
            //得到返回的数据，填充到相对应的位置
            $("#backData").text(backData);
        });
    });
</script>
</body>
</html>
  • Servlet代码：
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * Created by ozc on 2017/5/21.
 */
@WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设定编码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String backData = "用户名和密码合法";
        if ("哈哈".equals(username) && "123".equals(password)) {
            backData = "用户名或密码不合法";
        }
        response.getWriter().write(backData);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

8.png9.png


serialize()


上面在介绍参数的时候已经说了，发送给服务器端的参数是需要JSON格式的，但是呢，如果我在表单中有很多很多的参数呢？？？那不是要我自己一个一个地去拼接？？？？

于是乎，Jquery也提供了serialize()这么一个方法，给我们自动把表单中的数据封装成JSON格式的数据

使用之前要注意的是：

为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名

必须在<form>标签元素之内

根据上面的例子，我们来使用一下，我们调用serialize()方法，不自己去拼接JSON

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  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-1.8.2.js"></script>
</head>
<body>
<%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%>
<form>
    <table>
        <%--要想使用serialize这个方法，就必须在表单之内，并且给上对应的name属性--%>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td><input type="button" value="检查"></td>
        </tr>
    </table>
    <span id="backData"></span>
</form>
<script type="text/javascript">
    $(":button").click(function () {
        var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();
        //要传送过去的数据必须是JSON格式的
/*        var sendData = {
            username: $(":text").val(),
            password: $(":password").val()
        };*/
        var sendData = $("form").serialize();
        $.post(url, sendData, function (backData) {
            //得到返回的数据，填充到相对应的位置
            $("#backData").text(backData);
        });
    });
</script>
</body>
</html>
  • 效果：

10.jpg


$.ajax()


对于这个方法，我们又使用二级联动这个案例来讲解吧。我们曾经使用过JavaScript来解析XML、JSON来实现二级联动。这次我使用Jquery+Struts2+JSON来实现二级联动。

$.ajax()这个方法接收的参数是一个JSON类型，JSON里面有几个参数：

  • type【请求类型】
  • url【请求路径】
  • data【发送给服务器的数据，也是一个JSON类型】
  • success【回调函数】

这里遇到的问题：动态获取选择下拉框的值时候，调用的是val()而不是text()….

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省份-城市，基于jQuery的AJAX二级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--############前台页面##############################--%>
<select name="province" id="provinceId">
    <option>请选择省份</option>
    <option>广东</option>
    <option>北京</option>
</select>
<select name="city" id="cityId">
    <option>请选择城市</option>
</select>
<%--############监听省份##############################--%>
<script type="text/javascript">
    $("#provinceId").change( function() {
        //每次调用的时候，把城市的值清空，除了第一项
        $("#cityId option:gt(0)").remove();
        //得到具体选择的值，讲道理这里应该是test的，可是test()没反应，要用val()
        var province = $("#provinceId option:selected").val();
        //如果不是“请选择省份”，才触发事件
        if ("请选择省份" != province) {
            //它接收的是一个JSON类型的数据
            $.ajax(
                    {
                        type: "POST",
                        url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(),
                        data: {"province": province},
                        success: function (backData, aaa, ajax) {
                            //看下服务器带过来的数据是什么样的，然后再对JSON进行解析
                            //alert(ajax.responseText);
                            //得到服务器返回的数据,是一个JSON格式数据
                            var array = backData.city;
                            for(var i=0;i<array.length;i++) {
                                //动态创建option节点，添加到城市下拉框中
                                var $option  = $("<option>" + array[i] + "</option>");
                                $("#cityId").append($option);
                            }
                        }
                    }
            );
        }
    });
</script>

Action

import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by ozc on 2017/5/18.
 */
public class ProvinceAction  extends ActionSupport{
    //自动封装数据
    private String province;
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    //封装城市的集合
    private List<String> city = new ArrayList<>();
    public List<String> getCity() {
        return city;
    }
    public String findCityByProvince() throws Exception {
        if ("广东".equals(province)) {
            city.add("广州");
            city.add("珠海");
            city.add("从化");
        } else if ("北京".equals(province)) {
            city.add("一环");
            city.add("二环");
            city.add("三环");
            city.add("四环");
        } else {
            System.out.println("没有你选择的地区");
        }
        return "ok";
    }
}
  • Struts.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
   <package name="province" extends="json-default" namespace="/">
        <global-results>
            <result name="ok" type="json"></result>
        </global-results>
        <action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">
        </action>
    </package>
</struts>
  • 效果：

11.gif


总结


  • load()方法是使用Jquery的对象来进行调用的，得到服务器的结果自动会把结果嵌套到所在的标签中。
  • get()方法不是使用Jquery对象来调用，因此需要手动把结果放在想要放的位置
  • post()方法是用来把参数带过去给服务器的，因此我们需要在Servlet上手动设置编码。用法与get()方法一样
  • serialize()是非常好用的一个方法，不需要我们手动去拼接参数，会自动把form表单的参数封装成JSON格式的数据。
  • 至于$.ajax()方法，实际上就是集合了get()和post()方法。

12.jpg13.jpg14.jpg

文章标签：
JavaScript
前端开发
数据安全/隐私保护
数据格式
JSON
XML
java3y
目录
相关文章
北原_春希
|
4月前
|
Web App开发 JavaScript 前端开发
什么是jQuery
什么是jQuery
北原_春希
20 0
茶卡盐佑星_
|
4月前
|
JavaScript 前端开发
认识jQuery
认识jQuery
茶卡盐佑星_
23 0
白砂糖与香辛料`
|
5月前
|
JavaScript 前端开发 开发者
什么是jQuery?
什么是jQuery?
白砂糖与香辛料`
27 0
a15034260562-24955
|
5月前
|
SQL JavaScript 前端开发
初识jQuery
初识jQuery
a15034260562-24955
25 0
朱琳均
|
10月前
|
JSON JavaScript 数据格式
jQuery_02
jQuery_02
朱琳均
44 0
许潜行
|
10月前
|
存储 JavaScript 前端开发
jQuery01
jQuery01
许潜行
55 0
andyahui
|
存储 JavaScript 前端开发
JQuery02
JQuery02
andyahui
122 0
JQuery02
划水的阿瞒
|
JavaScript 前端开发
jQuery 效果
jQuery 效果
划水的阿瞒
110 0
java3y
|
XML Web App开发 JSON
什么是jQuery？（上）
笔记
java3y
150 0
什么是jQuery？（上）
胡临任
|
JavaScript 前端开发 程序员
jQuery的介绍
jQuery是对JavaScript的封装
胡临任
127 0