利用ajax进行前后端交互的简单例子

最新推荐文章于 2024-05-12 22:45:54 发布
最新推荐文章于 2024-05-12 22:45:54 发布
阅读量9.3k 收藏 64
点赞数 12
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29914229/article/details/82989732
版权

利用ajax进行前后端交互的简单例子

不多说，上代码：

前端部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询所有学生的信息</title>

    <link rel="stylesheet" href="css/common.css" />
    <script type="text/javascript" src="js/jquery.min.js" ></script>

    <style>
        body{
            background-color: #eee;
        }
        .main{
            width: 800px;
            margin: 20px auto;
            background-color: #fff;
            min-height: 400px;
            padding: 10px;
        }
        .main .toolbar{
            margin: 10px 0px;
        }
        .main .content{
            width: 200px;
        }
        .main .content .empty{
            text-align: center;
            padding: 4px;
            display: block;
            border: 0px solid #888;
            border-width: 0px 1px 1px 1px;
        }
        .main .table .c1{
            width: 80px;
        }
        .main .table .c2{
            width: 120px;
        }
    </style>
</head>
<body>
<div class="main">
<div class="toolbar">
    <button onclick="query()">查询</button>
</div>
<div class="content">
    <table class="table">
        <thead>
        <th class="c1">学号</th>
        <th class="c2">姓名</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div class="empty">
        没有数据
    </div>

</div>
</div>
</body>
<script>
    function query() {
        $.ajax({
            type:"GET",
            url:"queryAll",
            dataType:"json",
            success:function (resp) {
                showResult(resp);
            }
        })
    }
    function showResult(result) {
        var target = $(".main .content tbody");
        target.html("");
        for (var row of result){
            var str ="<tr>"
            +"<td>"+row.no+"</td>"
                +"<td>"+row.name+"</td>"
            +"</tr>";
            target.append(str);
        }
        if (result.length>0){
            $(".main .content .empty").hide();
        }else {
            $(".main .content .empty").show();
        }
    }
</script>
</html>

后端部分（servlet）

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 org.json.JSONArray;

import db.StudentDB;
import model.Student;

/**
 * Servlet implementation class QueryAllServlet
 */
@WebServlet("/queryAll")
public class QueryAllServlet extends HttpServlet {
	


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/plain");
		PrintWriter writer = response.getWriter();
		
		List<Student> list = StudentDB.queryAll();
		
		JSONArray array = new JSONArray(list);
		writer.write(array.toString(2));
	}

	

}

最初没有数据的时候：

点击查询以后：

白衣神棍
关注
  • 12
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
利用Node.js+Koa框架实现前后端交互的方法
01-20
总结起来，利用Node.js和Koa框架实现前后端交互的关键步骤包括： 1. 安装并配置Node.js环境。 2. 初始化项目，安装Koa和相关依赖。 3. 创建`app.js`设置路由和处理逻辑。 4. 创建服务层文件处理具体业务逻辑，如请求...
Django 使用Ajax进行前后台交互的示例讲解
09-20
在本篇教程中，我们将探讨如何在Django框架中使用Ajax技术实现前后台的数据交互。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个...同时，它也使得前后端交互更为灵活，能够处理更复杂的用户交互场景。
前后端交互之ajax篇
技术之路
08-05 3387
前后端交互之"门户"技术
Ajax前后端交互利器详解(一)
Augenstern_QXL的博客
09-07 6620
✍ 1、Ajax运行原理 Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验 1.1、Ajax实现步骤 创建Ajax对象 var xhr = new XMLHttpRequest(); 告诉Ajax 请求地址以及请求方式 xhr.open(method,url); 发送请求 xhr.send(body); // get请求不传 body参数,只有 post 请求使用 获取服务器端给客户端的响应数据 xhr.o
AJAX前端与后端交互技术知识点以及案例
最新发布
guai_guai_guai的博客
05-12 886
promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。
使用 ajax 进行前后端数据交互
搞钱
09-29 3709
ajax 一个前后台配合的技术，它可以让 javascript 发送 http 请求，与后台通信，获取数据和信息。 ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。jquery 将它封装成了一个函数 $.ajax()，我们可以直接用这个函数来执行 ajax 请求。
jQuery Ajax前后端数据交互
小楼一夜听春雨，深巷明朝卖杏花
11-15 3372
例如在不刷新页面的情况下查询数据、登录验证等（数据在没有变化的情况下走的是缓存）在往后端发送一个请求，在发送请求之后，正常拿到数据会渲染到用户列表的ul里面去。ajax是用来做前后端交互的，前端使用ajax去去发送一个请求，后端给其响应拿到数据，前端做些展示。在前端去对接开发的时候，它肯定要知道对接的后端接口返回的是什么数据，根据数据格式去做怎么样的数据处理。如果局部有新数据需要更新，需要刷新浏览器重新发起页面请求获取最新数据，如果。每次都是通过刷新解决这个问题，势必会给服务器造成负载加重，页面加载缓慢。
一个完整的采用Jquery的ajax 方法进行前后台交互的案例
热门推荐
松花江畔
04-06 1万+
由于最近我一直在做一个项目、其中用的一个框架绝大部分数据的交互部分几乎是采用Jquery的ajax完成的，但是由于本人的Jquery学习的不是很好，导致在进行其中的一个采用ajax 进行交互的功能的时候遇到了很多的问题，于是各种百度，但是在百度的过程中，发现绝大部分的博主都是只展示前台的ajax 部分的代码，要么就是只展示后台的逻辑业务处理部分的代码，作为一个新时代的有为青年，本着开源的精神，同时...
简单Ajax实例(带前后台交互)
06-08
本实例以JSP页面为例，详细阐述Ajax在前后台交互中的应用。 一、Ajax基础概念 1. XMLHttpRequest对象：它是Ajax的核心，负责与服务器建立连接并发送请求，接收响应。 2. 异步：Ajax的核心特性是异步处理，这意味着...
JS的Ajax与后端交互数据的实例
10-18
在JavaScript（JS）中，Ajax...总的来说，Ajax是JavaScript与后端数据交互的重要手段，它简化了前后端通信的过程，提高了网页的交互性和效率。了解并熟练掌握Ajax的使用，对于提升Web应用的用户体验至关重要。
原生JS进行前后端同构
10-18
**前后端同构**是指在开发Web应用时，利用JavaScript技术使得前端和后端能够共享同一份代码，从而实现统一的页面渲染逻辑。这既包括首次加载时由服务器端渲染HTML，也包括后续用户交互时由客户端进行动态更新。这种...
$ajax 提交数据,jquery ajax提交数据给后端
weixin_39777213的博客
08-05 361
大家好，今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学。初学javaweb的同学前端提交数据基本上都是用form表单提交，这玩意儿反正我是觉得不太好玩。而JavaScript ajax写一大堆，看着都头痛。jquery ajax简单易懂容易学。废话不多说，上教程~新建一个Web项目，在\WebContent下新建一个index.jsp新建之后不用慌，默认的jsp编码得改一下，我这...
RestFul风格前后端交互（ajax请求，后端接收）
赵睿宇的博客
04-11 3503
前端后端ajax交互格式记录
Ajax与后台交互，无法进入后台，但是可以进入success（未解决）
weixin_59193121的博客
07-16 762
如题，这两天打算学Ajax，看了一些视频后，打算做一个用户注册，结果Ajax与后台的交互始终无法进入后台（但是可以进入success，就很奇怪，进不去后台不应该是走error吗？），在success中用alert输出后台返回值，结果是html代码，我用apipost测试controller，结果正确返回，后台也有输出打印，回去页面上，在输入框输入后点击注册按钮，弹出提示框，提示框内出现的是html代码。有没有大佬帮忙看看，我错哪了，为什么我Ajax请求进不去后台，还是可以走success？...
java 前后端交互_Springmvc和ajax如何实现前后端交互
weixin_35970195的博客
02-24 497
springmvc使用@RequestBody来获取前端的json字符串并转化为java对象使用@ReponseBody来将返回的java对象转换为json形式返回前端下面是几个使用springmvc和ajax进行前后端交互的简单实例1.传递简单对象：前端：$(function(){$("#btn3").click(function(){//准备好要发的数组var array=[16,18,56]...
利用Ajax进行前端和后端互传数据
Yolandalt7777777的博客
01-21 1万+
1.前端代码 SSM框架下的jsp文件代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"%> <% String path = request.getContextPath(); %>...
前后端交互工具 ---- Ajax 的使用
rain67的博客
10-05 1940
如果发起请求的页面 对应的域名(域名1) 和 接收ajax请求的服务器(域名2)，如果域名1 和域名2 不相同，那么就认为是一次跨域请求。function() ，回调函数里面有两个参数，一个是data表示响应的正文body,一个是status表示响应的状态码描述信息。在服务器代码这里做一些特别的设置，就可以解开ajax不能跨域的限制。ajax为了保证安全性，要求发起ajax请求的页面，和接收ajax请求的服务器，应在同一个域名下/地址下。是一个回调函数，通过这个回调函数，拿到响应的相关信息。
Ajax axios——前后端数据交互
我的的博客哦
05-22 553
🔰AJax 就是JS和服务端交互的手段🔰Ajax 是浏览器提供的一套方法，，提高用户浏览网站应用的体验。ajax 全名 async javascript and XML(异步JavaScript和XML)是也就是我们AJAX，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，。是⼀个执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）
ajax和后端交互示例,jQuery Ajax前后端使用JSON进行交互示例
weixin_42119281的博客
08-06 491
需求：前端通过jQuery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端这里使用servlet的方式1、采用$.post方法index.jsp页面function checkUserid() {$.post('Ajax/CheckServlet',//url{userid : $("#userid").val(),sex : "男"}, functi...
JavaScript进阶：面向对象与前端交互
前后端交互的另一种常见方式是使用`XMLHttpRequest`或现代的`fetch` API发送Ajax请求，配合服务器设置CORS（跨源资源共享）策略，也可以实现跨域。 JavaScript进阶基础涵盖了许多核心概念，包括面向对象、前后端...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值