Jquery就是这么简单(3)_H5之家 - 中国HTML5教程资源分享第一站

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

<%-- 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></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 ServletExcept高端女装详情_交行信用卡买单吧积分怎么查ion, IOException { this.doPost(request, response); } }

这里写图片描述

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"></td> </tr> <tr> <td>密码：</td> <td><input type="password"></td> </tr> <tr> <td><input type="button" value="检查"></td> </tr> </table> <span></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>

效果：

这里写图片描述

$.ajax()

对于这个方法，我们又使用二级联动这个案例来讲解吧。我们曾经使用过JavaScript来解析XML、JSON来实现二级联动。这次我使用Jquery+Struts2+JS买车计算器购置税_太原买房子上哪个网站ON来实现二级联动。

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