演示JSON(jquery和servlet)

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量50 收藏
点赞数
文章标签： json java javascript ViewUI
原文链接：http://www.cnblogs.com/caststudy/p/11413190.html
版权

演示1：

servlet代码

@WebServlet(urlPatterns = "/getJSON")
public class JSONServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().print("{\"abc\":\"123\"}");  //默认字符串
    }
}

HTML代码

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<zsls id='dis'></zsls>
<script type="text/javascript">
function getJSON() {
    $.ajax({
        url:"getJSON",        
        success:function(res){            
            $("#dis").html(res);
            alert(typeof res);  //字符串
        }
    });
}
getJSON();
</script>
</body></html>

运行效果

演示2：

Servlet代码

package com.cxy.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = "/getJSON")
public class JSONServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");   //指定以json格式返回
        resp.getWriter().print("{\"abc\":\"123\"}");
    }
}

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<zsls id='dis'></zsls>
<script type="text/javascript">
function getJSON() {
    $.ajax({
        url:"getJSON",        
        success:function(res){            
            $("#dis").html(res);
            alert(typeof res);     //json对象
            $("#dis").html(res.abc);
        }
    });
}
getJSON();
</script>
</body></html>

运行效果

演示3

servlet代码

package com.cxy.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



@WebServlet(urlPatterns = "/getJSON")
public class JSONServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            resp.getWriter().print("{\"abc\":\"123\"}"); //默认返回普通文本
    }
}

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<zsls id='dis'></zsls>
<script type="text/javascript">
function getJSON() {
    $.ajax({
        url:"getJSON",    
        dataType:"json",  //指定返回类型为json
        success:function(res){            
            $("#dis").html(res);
            alert(typeof res);
            $("#dis").html(res.abc);
        }
    });
}
getJSON();
</script>
</body></html>


运行效果

 

演示4：

servlet代码

@WebServlet(urlPatterns = "/getJSON")
public class JSONServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().print("{\"abc\":\"123\"}");  //默认字符串
    }
}

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<zsls id='dis'></zsls>
<script type="text/javascript">
function getJSON() {
    $.ajax({
        url:"getJSON",        
        success:function(res){            
            $("#dis").html(res);
            alert(typeof res);
            $("#dis").html(res.abc);
            res=eval("("+res+")");   //转换为对象
            alert(typeof res);
            $("#dis").html(res.abc);
        }
    });
}
getJSON();
</script>
</body></html>


运行效果

 

转载于:https://www.cnblogs.com/caststudy/p/11413190.html

axthxn6099
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery技术之HTML操作
张波的技术积累
04-04 6806
1：操作HTML       1.1 获取HTML的内容              无标题文档 $(document).ready(function() { var htmlString = $("ul li").html(); alert(htmlString); }); 北京 上海 广州
Jquery+ajax+json+servlet原理和Demo
qinshang007的专栏
04-27 776
Jquery+ajax+json+servlet原理和Demo 大致过程： 用户时间点击，触发js，设置$.ajax，开始请求。服务器响应，获取ajax传递的值，然后处理。以JSON格式返回给ajax。ajax在sucess对应的函数中将返回的json数据进行解析，然后输出到jsp页面。 1.前台index.jsp [html] 
JQuery && Ajax和Json
weixin_44355227的博客
08-22 132
Ajax和Json 一、Ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。 1、原生的JS操作（了解） function loadXMLDoc() { //在这里使用原生的js代码来进行Ajax操作。 var engine = new XMLHt
Jquery ajax 访问Servlet 处理 Json 数据
热门推荐
www314599782的专栏
06-09 1万+
前台jsp页面: <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> My
jquery ajax servlet
comil4444的专栏
04-06 454
假设： 1、你的页面在Web-Root下，内容为： ，所用编码为utf-8 2、你的servlet为： HelloWorldServlet.java 映射路径为 servlet/helloWorldServlet 步骤： 1、引入jquery-1.6.4.min.js 2、编写id为userName的输入框的点击触发函数： $("#userName").keyup(funct
【Web开发】前后端分离servlet+json博客系统项目
weixin_51574797的博客
07-11 599
基于servlet和json的博客项目,包括常用的功能:博客列表,博客详情,发布博客,删除博客.
json响应和ajax响应
qq_52108058的博客
06-06 359
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或null）。JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。详细查看https://www.runoob.com/json/json-stringify.html。语句的作用是希望在页面加载完，自动执行定义js代码（function）。对象可以包含多个 key/value（键/值）对。JSON 数组在中括号中书写。
Jquery zTree演示程序Demo总结
zzc1684的博客
03-04 349
  Demo 演示 http://www.ztree.me/v3/demo.php   前言： 最近的项目需要用到zTree树，于是想将zTree树总结一下。前段时间一直没有时间总结，趁国庆还有这么点时间，总结一下。zTree树控件是基于Jquery的，官方提供了很好的API文档和Demo 用户可以从如下地址下载：http://www.ztree.me/hunter/zTree....
Ajax和Json使用入门
qq_40460454的博客
03-22 208
AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 参考上图 * 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 （重点）Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器进行少量数据交
jQuery Ajax前后端使用JSON进行交互示例
11-28
总结来说，这个示例展示了如何利用jQuery的Ajax功能和Servlet进行JSON数据的交互。前端通过Ajax请求将JSON数据发送到后端，后端接收到数据后进行处理，然后以JSON格式返回结果。这种方式使得前后端的通信更为便捷，...
Servlet jQuery Ajax
03-21
在文件名为"testajax"的示例中，可能包含了一个简单的Web应用示例，演示了如何使用Servlet、jQuery和Ajax进行通信。这个例子可能包括一个Servlet类，负责处理来自客户端的Ajax请求，以及一个HTML页面，该页面使用...
Send-json-to-servlet-using-jquery-ajax
07-10
以下是一个简单的示例，演示如何使用jQuery的AJAX来发送JSON数据到Servlet： ```javascript $.ajax({ type: "POST", // 使用POST方法 url: "MyServlet", // Servlet的URL contentType: "application/json; ...
json解析和封装案例
05-14
2. 解析JSON：演示如何使用`JSON.parse()`函数将JSON字符串转化为JavaScript对象。 3. 封装JSON：使用`JSON.stringify()`函数将JavaScript对象转化为JSON字符串。 4. 错误处理：处理解析和封装时可能遇到的错误，如...
jquery + servlet实现省市联动二级菜单
04-10
在这里，servlet接收前端jQuery发起的Ajax请求，查询数据库中对应省份的所有城市，然后以JSON或XML格式返回数据给前端。 实现省市联动的步骤大致如下： 1. **前端准备**：创建HTML结构，包括省份和城市的下拉列表...
Hutool——发送http请求案例
专注写bug
07-29 580
在实际开发过程中，微服务环境下往往采取openfeign实现服务与服务之间的请求调用。但有时候需要调用第三方API的情况，虽然在spring boot 框架中提供了请求模板，但这个不怎么好用。市面上支持http调用的框架技术很多，比如okhttp等。本篇文章重点说明Hutool给我们封装的请求方法类。/*** 调用post 接口发送get请求* @return。
深入解析 Jackson 的 @JsonProperty 注解
一起coding，一起嗨。
07-29 357
深入解析 Jackson 的 @JsonProperty 注解
js、ts、argular、nodejs学习心得
最新发布
07-30 350
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
微信小程序教程002：代码结构介绍和新建小程序页面
WwLK123的博客
07-29 558
pages：小程序所有页面utils：存放工具性质的模块app.js：小程序项目的入口文件==（至关重要）==app.json：小程序项目的全局配置文件app.wxss：小程序项目的全局样式文件：项目的配置文件：用来配置小程序及其页面是否允许被微信索引WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。WXML和HTML的区别标签名称不同属性节点不同。
使用jQuery Mobile和JSON构建移动Web应用
"jQuery Mobile 和 JSON 是移动Web开发中两个重要的技术。jQuery Mobile 是一个专为触摸设备优化的前端框架，用于构建响应式和交互式的移动应用程序。它提供了丰富的组件和主题系统，使得开发者可以轻松创建一致的跨...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值