Ajax与Json

Naaaaa.a

已于 2022-05-22 22:28:24 修改

阅读量247

点赞数

分类专栏： java 文章标签： ajax json javascript

于 2022-05-20 20:26:18 首次发布

本文链接：https://blog.csdn.net/qq_44189274/article/details/124889785

版权

java 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

1.ajax异步请求

上面的请求都是服务响应的结果为网页或者路径。ajax只响应数据。

1.1 什么是ajax

例如: 百度搜索框----使用了ajax.

当在百度搜索框触发键盘弹起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了ajax异步【局部】刷新

总结:（1） ajax一定是通过事件触发的。借助js。

（2）ajax服务器响应的不在是网页，而是数据。

1.2 简单使用ajax.

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm/

借助: jquery

(1) 在网页中引入jquery库

(2)ajax的语法:---get/post提交方式。 [] 表示可有可无。

//get post

jQuery.get(url, [data], [callback], [type])
jQuery.post(url, [data], [callback], [type])
get|post:表示提交方式.
url: 服务器路径
data: 向服务器发送请求时携带的参数。
callback: 回调函数，当服务器响应结果时，会调用的函数。
type: 指定服务器响应的数据类型。

例：

<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: Z
  Date: 2022/5/20
  Time: 19: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 type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  </head>
  <body>
      <%--参照:比对浏览器是否刷新页面--%>
      <%=new Date()%><br/>
      <input type="button" onclick="ajax()" value="点击">
  </body>
      <script>
        function ajax(){
          //get 通过网页控制台可以看到提交的信息
          $.get("AjaxServlet",{"name":"zsy","age":20},function (result){
            //AjaxServlet表示服务器路径  {name:zsy,age:20}请求的参数  function(result){回调函数 result服务响应的数据}
            alert(result);
          });
          //post 会对提交的信息加密,无法从控制台看到提交的信息
          /*$.post("AjaxServlet",{"name":"zsy","age":20},function (result){
              alert(result);
          });*/
        }
      </script>
</html>

servlet:

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "AjaxServlet", urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接受请求参数
        String name = req.getParameter("name");
        System.out.println("name=========="+name);
        String age = req.getParameter("age");
        System.out.println("age==========="+age);

        //响应客户端数据。
        PrintWriter out = resp.getWriter();//获取out对象。
        out.println("hello ajax");//()中的内容就是响应给客户端的内容。

        //关闭输出对象
        out.flush();
        out.close();
    }
}

1.3 服务响应的数据类型

(1)文本类型----它是默认的。

(2)json对象类型--->重要使用最多的。

(3)xml类型----->一般不要，多用于人工智能。微信小程序。

2. 什么是json

/*SON（JavaScript Object  Notation）一种简单的数据格式，比xml更轻巧。JSON
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。*/
[
{
   "name":"张三",
   "age":18,
   "address":"香港"
}, 
{
   "name":"张三",
   "age":18,
   "address":"香港"
}, 
]


   规则如下:
       1）映射用冒号（“：”）表示。名称:值
       2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
       3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
       4） 并列数据的集合（数组）用方括号(“[]”)表示。
         [
           {名称1:值,名称2:值2},
           {名称1:值,名称2:值2}
         ]
      5  元素值可具有的类型：string, number, object, array, true, false, null

只要给json数据，就可以从json数据中获取到想要的任何属性值。

json格式的语法:

json对象: {名称:值,名称:值.....}
json集合: [{名称:值,名称:值},{名称:值,名称:值},{名称:值,名称:值}]
值: string, number, object, array, true, false, null

Json简单练习:

var people ={
"firstName": "Brett",
"lastName":"McLaughlin",
"email": "brett@newInstance.com"
};

弹出email的值

alter(people.email);

var people =[
{"firstName": "Brett","email": "brett@newInstance.com" },
{"firstName": "Mary","email": "mary@newInstance.com" }
];
弹出第二个人email值

alert(people[1].email);

var people ={
"programmers":
[
{"firstName": "Brett", "email": "brett@newInstance.com" },
{"firstName": "Jason", "email": "jason@servlets.com" }
]
};
弹出第二个email的值

alert(people.programmers[1].email);

var people ={
"programmers": [
{ "firstName": "Brett", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "genre": "science fiction" },
{ "firstName": "Tad", "genre": "fantasy" },
{ "firstName": "Frank", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "instrument": "guitar" },
{ "firstName": "Sergei", "instrument": "piano" }
]};
弹出Sergei的instrument的值。

alert(people.musicians[1].instrument);

var people ={
"username":"mary",
"age":"20",
"info":{"tel":"1234566","celltelphone":788666},
"address":[
{"city":"beijing","code":"1000022"},
{"city":"shanghai","code":"2210444"}
]
};
弹出 celltephone的值

alert(people.info.celltelphone);

3.服务器如何返回json数据

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body>

<input type="button" id="btn" value="点击"/>
</body>

<script>
      $("#btn").click(function () { //为btn按钮绑定点击事件
                $.post("json02",function(result){//通过ajax向服务端发送请求
                         //var parse = JSON.parse(result);//手动把服务器传递的json字符串转为json对象。
                        alert(result);
                        // alert(result.name);//不能 因为result还是一个文本类型 只是他符合json格式。
                },"json"); //json:告诉浏览器-把服务端返回的json格式字符串转换json对象。 默认为html文本类型。
      });
</script>
</html>

servlet:

package com.aaa.servlet;

import com.aaa.entity.User;

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(name = "AjaxServlet02",urlPatterns = "/json02")
public class AjaxServlet02 extends HttpServlet {


    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
         //业务处理得到一个用户对象---从数据库中查询的数据.
        User user = new User(1,"张三",18);//响应给客户端

        PrintWriter writer = resp.getWriter();
        //把java对象转换json格式的对象。如何转换：第一种手动转。 第二种借助第三方的工具来转。
        String json="{";
        json+="\"id\""+":"+"\""+user.getId()+"\",";
        json+="\"name\""+":"+"\""+user.getName()+"\",";
        json+="\"age\""+":"+"\""+user.getAge()+"\"";
        json+="}";
        System.out.println(json);
        writer.print(json); //前端需要服务端传递一个json或者文档.{"name":"张三","age":15};


        writer.flush();
        writer.close();

    }
}

上面自己把java对象转换json格式的字符串，这种方式非常麻烦。可以使用第三方工具来完成。

比如阿里云fastJson, hutool工具，spring框架自动等等。

使用阿里fastjson. 引入fastjson的jar文件。

 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");


        PrintWriter writer = resp.getWriter();
        List<User> list=new ArrayList<>();
        list.add(new User(2,"李四",18));
        list.add(new User(3,"王五",17));
        list.add(new User(4,"赵六",18));
//[{"age":18,"id":2,"name":"李四"},{"age":17,"id":3,"name":"王五"},{"age":18,"id":4,"name":"赵六"}]
        String listjson = JSON.toJSONString(list);
        writer.print(listjson); //前端需要服务端传递一个json或者文档.{"name":"张三","age":15};


        writer.flush();
        writer.close();

    }

点击某个按钮通过ajax向后台发送请求，后台返回一个json字符串[ 借助fastjson]。

Naaaaa.a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax与Json

1.ajax异步请求上面的请求都是服务响应的结果为网页或者路径。ajax只响应数据。1.1 什么是ajax例如: 百度搜索框----使用了ajax.当在百度搜索框触发键盘弹起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了ajax异步【局部】刷新总结:（1） ajax一定是通过事件触发的。借助js。（2）ajax服务器响应的不在是网页，而是数据。1.2 简单使用ajax.jQuery API ...
复制链接

扫一扫