投稿
  1. 首页
  2. html-js-css

Ajax技术详解（三）Jquery的Ajax使用

code • 2022-5-17 • html-js-css • 阅读 32

Ajax技术详解（三）Jquery的Ajax使用,第1张

目录

前言

一.$.ajax()的使用

1.语法结构

2.$.ajax()在异步请求中提交数据

(1)提交普通格式(非Json格式)数据

(2) 提交 JSON 格式数据

(3)$.ajax()处理响应中的 JSON 格式数据

 二.$.get()的使用

 三.$.post()的使用

四.$.getJSON()的使用

五.serialize()方法的使用

前言

在 JQuery 中提供了对 Ajax 的封装，让我们在使用 Ajax 技术时变得更加容易。在 JQuery中提供了很多的基于 Ajax 发送异步请求的方法，如：$.ajax()、$.get()、$.post()、$.getJSON()。用XHR对象发送请求比较麻烦，而用这种方法比较方便。

在web下创建了js文件夹，把jquery.js放到里面，然后在下面的jsp页面使用时要引入！

不了解jQuery请戳这里

一.$.ajax()的使用 1.语法结构 $.ajax({name:value,name:value......}) ，参数是JavaScript的对象类型。

jqueryAjaxDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/5/12
  Time: 12:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

 jqueryAjaxServlet.java：

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

@WebServlet("/jqueryAjax.do")
public class jqueryAjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter pw=resp.getWriter();
        pw.println("Hello Jquery Ajax");
        pw.flush();
        pw.close();
    }
}

输出：

点击按钮：

2.$.ajax()在异步请求中提交数据 在 $.ajax() 方法中通过 data 属性来存放提交的数据，支持 JSON 格式的数据。 (1)提交普通格式(非Json格式)数据 在 data 属 性 中 我 们 可 以 通 过 两 种 方 式 来 指 定 需 要 提 交 的 数 据 。 一 种 是 通 过 name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用 哪种方式在 Servlet 中都是通过 request.getParameter 方法根据 name 获取 value 的。 通过标准格式指定提交数据 data:”name=value&name=value.....” 在 Servlet 中通过 request.getParameter 来获取提交的数据。

通过 JavaScript 对象指定提交数据 

data:{
    userid:100, 
    username:”oldlu” 
}
在 Servlet 中通过 request.getParameter 来获取提交的数据。

dataDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/5/12
  Time: 13:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


用户ID:

用户姓名:

 DataServlet.java:

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

/*
在$.ajax()方法中提交数据
 */
@WebServlet("/data.do")
public class DataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid=req.getParameter("id");
        String username=req.getParameter("name");

        resp.setCharacterEncoding("utf-8");
        PrintWriter pw=resp.getWriter();
        pw.println(userid+" "+username);
        pw.flush();
        pw.close();
    }
}
输出：

(2) 提交 JSON 格式数据 在 $.ajax() 中提交 JSON 格式的数据需要使用 post 方式提交，通过 JSON.stringify() 函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入获取提交的 JSON 格式 的数据。 data:JSON.stringify({name:value,name:value......}) 在 Servlet 中通过 req.getReader().readLine() 来获取提交的数据。

jsonDataDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/5/12
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


用户ID:

用户姓名:

JsonDataServlet.java:

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

@WebServlet("/jsonData.do")
public class JsonDataServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求数据
        String s=req.getReader().readLine();
        PrintWriter pw=resp.getWriter();
        pw.println(s);
        pw.flush();
        pw.close();
    }
}

输出：

(3)$.ajax()处理响应中的 JSON 格式数据 $.ajax() 方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是一个 JSON 格式的数据，那么 dataType 的值为“JSON ” ,在回调函数中我们得到的直接就是JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse() 做格式的转换处理。

 jsonConvertDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/5/12
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


用户ID:

用户姓名:

JsonConvertServlet.java：

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

/*
$.ajax()处理响应中的 JSON 格式数据
 */
@WebServlet("/jsonConvert.do")
public class JsonConvertServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("applicaton/json");
        String s=req.getReader().readLine();
        PrintWriter pw=resp.getWriter();
        pw.println(s);
        pw.flush();
        pw.close();
    }
}

输出：

 二.$.get()的使用 $.get() 方法是 $.ajax() 方法基于 get 方式发送异步请求的简化版。

1.语法结构

$.get(url,function(result)) $.get(url,data,function(result))

2.通过标准格式指定提交数据

$.get(url,”name=value&name=value”,function(result))

3.通过 JavaScript 对象指定提交数据

$.get(url,{userid:1,username:”oldlu”,......},function(result))

servlet就用上面的一个DataServlet.java

getDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/5/12
  Time: 16:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


用户ID:

用户姓名:

输出：

 三.$.post()的使用 $.post() 方法是 $.ajax() 方法基于 post 方式发送异步请求的简化版。 但是不支持json数据的提交。

1.语法结构

$.post(url,function(result)) $.post(url,data,function(result))

2.通过标准格式指定提交数据

$.post(url,”name=value&name=value”,function(result))

3.通过 JavaScript 对象指定提交数据

$.post(url,{userid:1,username:”oldlu”,......},function(result))

测试：将上面代码中$.get修改为$.post，然后在DataServlet.java中重写doPost方法，内容和doGet一样即可。

四.$.getJSON()的使用 $.getJSON() 方法是 $.ajax() 方法基于 get 方式发送异步请求，并将 响应结果 中 JSON 格式的字符串对象自动 转换为 JavaScript 对象 。 在使用该方法时要求返回的数据必须是 JSON 格式类型。 $.getJSON() 方法和 resp.setContentType(“application/json”) 是一起使用的。

语法结构 $.getJSON(url,function(result)) $.getJSON(url,data,function(result)) 通过标准格式指定提交数据 $.getJSON(url,”name=value&name=value”,function(result)) 要求返回的数据格式必须是 JSON 格式。 通过 JavaScript 对象指定提交数据 $.getJSON(url,{userid:1,username:”oldlu”,......},function(result)) 要求返回的数据格式必须是 JSON 格式。

 getJsonDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/5/12
  Time: 17:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


用户ID:

用户姓名:

GetJsonServlet.java：

package com.first.servlet;

import com.first.common.JsonUtils;

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;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/getJson.do")
public class GetJsonServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userid=req.getParameter("id");
        String username=req.getParameter("name");
        Map map=new HashMap<>();
        map.put("userid",userid);
        map.put("username",username);
        String s= JsonUtils.objectToJson(map);
        resp.setContentType("application/json");
        PrintWriter pw=resp.getWriter();
        pw.println(s);
        pw.flush();
        pw.close();
    }
}

输出：

五.serialize()方法的使用 将 form 表单中的数据自动拼接成 name=value&name=value 结构。 语法结构 var param = $(“form”).serialize(); param 的值为： name=value&name=value

servlet还是那个DataServlet.java

 serializeDemo.jsp：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/28 0028
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Title

欢迎分享，转载请注明来源：内存溢出

原文地址: http://www.outofmemory.cn/web/940548.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表（0条）

保存