文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

Ajax

时间：2021-08-24 23:05:31   收藏：0   阅读：60

Ajax简介

概述

JavaScript发送Ajax请求

JavaScript发送Ajax异步请求流程

JavaScript发送Ajax的get请求示例

JavaScript发送Ajax的post请求示例

jsp页面

<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: ChengLong
  Date: 2021/8/24
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>使用JavaScript发送ajax的post请求</title>
</head>
<script>
    /*点击id=jsAJAXpost按钮，发送异步请求=*/
    window.onload=function () {
        //1、获取id=jsAJAXget按钮
        var jsAJAXget = document.getElementById("jsAJAXpost");
        jsAJAXget.onclick = function () {
            //2、创建XMLHttpRequest
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //3、设置请求信息
            /*
            * open(method, url, async)
            规定请求

            method：请求类型 GET 或 POST
            url：文件位置
            async：true（异步）或 false（同步） 默认true

            * */
            xhttp.open("post", "/day17/JsAjaxPostServlet")
            //4、发送请求
            //对请求体中内容进行编码
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("name=汤姆&pwd=123");
            //5、获取响应信息
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var str = this.responseText;
                    //把str转为json
                    var strObj = JSON.parse(str);
                    alert(strObj.name);
                    var msg = document.getElementById("msg");
                    msg.innerHTML = str;
                }

            }
        }
    }
</script>
<body>

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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 11:02
 */
@WebServlet("/JsAjaxPostServlet")
public class JsAjaxPostServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        String name = req.getParameter("name");
        String pwd = req.getParameter("pwd");
        System.out.println(name+"==="+pwd);
        //响应流对象
        PrintWriter writer = resp.getWriter();
        String json = "{\"name\":\"张三\",\"age\":18,\"性别\":\"男\",\"citys\":[\"武汉\",\"北京\"]}";
        writer.print(json);
    }
}

Json

简介

json使用

json字符串和json对象的相互转换

jackson使用

介绍

对象转为json字符串

列表转json字符串

public void test2() throws JsonProcessingException {
        List<Book> list = new ArrayList<>();
        list.add(new Book(1,"css入门",80,"无"));
        list.add(new Book(2,"java入门",90,"无"));
        list.add(new Book(3,"js入门",50,"无"));

        //把list对象转为json数据
        ObjectMapper objectmapper = new ObjectMapper();
        String json = objectmapper.writeValueAsString(list);
        System.out.println(json);

    }

集合转json字符串

jQuery发送Ajax请求

$.ajax发送

$.get发送

$.post发送

import bean.Book;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 15:47
 */
@WebServlet("/JqueryAjaxGetServlet03")
public class JqueryAjaxPostServlet03 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        String city = req.getParameter("city");
        String age = req.getParameter("age");
        System.out.println(city+"==="+age);
        //返回响应数据
        ObjectMapper objectMapper = new ObjectMapper();
        //把book对象转为json字符串
        Book book = new Book(1,"AJAX入门使用",80,"无");
        String json = objectMapper.writeValueAsString(book);
        //把json字符串响应给浏览器
        resp.getWriter().print(json);

    }
}

原文：https://www.cnblogs.com/chenglong0201/p/15182605.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！