jQuery AJAX详解-优快云博客

本文详细介绍了jQuery库中的AJAX功能，包括serialize(), serializeArray(), $.post, $.get, load(), $.ajax()等方法的使用，展示了如何通过这些方法实现前端与后端之间的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.serialize() 与 serializeArray()

1..serialize() 方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如 $( “input, textarea, select” ).serialize(); 同样也可以对整个表单对象进行操作，比如$ ( “form” ).serialize();在这种情况下，jQuery成功的控制表单的序列化。只有form元素检查它们所包含的输入框，在所有其他情况下，输入元素要序列化应该是集合的一部分传递给.serialize()方法。选择集合中表单和它子元素在序列化的字符串会导致重复。
注意: 只有 “successful controls”可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性。此外，复选框（checkbox）和单选按钮（radio）(input 类型为 “radio” 或 “checkbox”)的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。
2..serializeArray() 方法和serialize()方法类似，只不过它创建了一个对象组成的javascript数组，用来编码成一个JSON一样的字符串。它对表单和/或表单控件的 jQuery 集合起作用。
二. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

示例：

package com.lyf.control;
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;
import java.io.PrintWriter;

/**
 * Created by fangjiejie on 2017/4/29.
 */
@WebServlet(
        name="FormControl",urlPatterns = {"/form"}
)
public class FormControl extends HttpServlet{

    private String []name={"zhangsan","lisi","fangfang","haha","enen"};;
    @Override
    public void init() throws ServletException {

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username=req.getParameter("username");
        String password=req.getParameter("password");
        String flag="false";
        for(String n:name){
             if(username.equals(n)){
                 flag="true";
             }
        }
        resp.setContentType("text/html");
        resp.setCharacterEncoding("utf-8");
        PrintWriter out=resp.getWriter();

        out.print(flag);
        out.flush();
        out.close();
        System.out.println(username+":"+password);
    }
}

<%--
  Created by IntelliJ IDEA.
  User: fangjiejie
  Date: 2017/4/29
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="js/jquery-1.11.0.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          var data=$("#form").serialize();
          //var data=$("#form").serializeArray();得到的是数组
          $.post("form",data,function (txt) {
            if(txt.indexOf("true")!=-1){
              alert("用户名已存在，请重新输入");
            }else{
              alert("恭喜您，请继续注册");
            }
          },"text")
        })
      })
    </script>
  </head>
  <body>
  <form action="" id="form">
    用户名：<input type="text" name="username" id="un"><br>
    密码：<input type="text" name="password" id="pw"><br>
    <input type="button" value="验证" id="btn">
    <div id="msg"></div>
  </form>
  </body>
</html>

三. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

url (String) :  发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

四. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件，例如表单。

五.jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
参数列表：

这里写图片描述

示例代码：
这里我们借助JSON解析,所以要引入

package com.lyf.control;

import com.alibaba.fastjson.JSON;
import com.lyf.vo.Book;

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;
import java.io.PrintWriter;

/**
 * Created by fangjiejie on 2017/4/29.
 */
@WebServlet(
        name="bookControl",urlPatterns = {"/book"}
)
public class BookControl extends HttpServlet{
    @Override
    public void init() throws ServletException {
        super.init();
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String id=req.getParameter("id");
        Book book=null;
        switch (id){
            case "1":
                book=new Book("img/1.jpg",100,"远行");
                break;
            case "2":
                book=new Book("img/2.jpg",200,"境界");
                break;
            case "3":
                book=new Book("img/3.jpg",300,"萌萌哒");
                break;
            default:book=null;
        }
        String json= JSON.toJSONString(book,true);
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html");
        System.out.println(json);
        PrintWriter out=resp.getWriter();
        out.write(json);
        out.flush();
        out.close();
    }
}

<%--
  Created by IntelliJ IDEA.
  User: fangjiejie
  Date: 2017/4/29
  Time: 12:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <script>
        $(function(){
            $("a").mouseover(function(){
                var data=$(this).attr("index");
                //alert(data);
                $.ajax({
                  url:"book",
                  data:"id="+data,//必须以键值对的形式输送
                  type:"post",//前段向后端发出的请求方法类型
                  dataType:"html json",//后端向前端发出的数据类型
                  success:function(txt){//成功后的回调函数
                       $("#pic").attr("src",txt.pic);
                       $("#price").html(txt.price);
                      $("#describ").html(txt.describe);
                    }
                })
                var x=event.clientX;
                var y=event.clientY;
                $("#tip").css("left",x+10).css("top",y+10).css("display","block");
            })
        })
    </script>
</head>
<body>

<ul>
    <li><a href="" index="1">bookA</a></li>
    <li><a href="" index="2">bookB</a></li>
    <li><a href="" index="3">bookC</a></li>
</ul>

<div style="width:100px; height: 100px;display: none;position: absolute" id="tip" >
    <img src="" alt="" id="pic" width="80" height="80">
    <span id="price"></span>
    <span id="describ"></span>

</div>

</div>
</body>
</html>