<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="${pageContext.request.contextPath }/book/list" rel="external nofollow" >查询书单</a>
<table width="70%" border=1>
<tr>
<td>书籍编号</td>
<td>名称</td>
<td>藏书量</td>
<td>操作</td>
</tr>
<c:forEach items="${list}" var="book">
<tr>
<td>${book.bookId }</td>
<td>${book.name }</td>
<td id=${book.bookId }>${book.number }</td>
<td><input type="buttom" value="订阅" onclick="requestByJson(${book.bookId })"></td>
</tr>
</c:forEach>
</body>
<script src="${pageContext.request.contextPath }/resources/js/jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
function requestByJson(bid) {
//alert(bid);
var stid=12345678915;
var p = {'studentId':stid};
$.ajax({
type : 'post',
url : "${pageContext.request.contextPath }/book/"+bid+"/appoint",
//设置contentType类型为json
//contentType : 'application/json;charset=utf-8',//错误写法
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',//缺省值
//json数据
data: {'bookId':1004,'studentId':stid},//必传参数必须填写，位置任意。增加参数，不影响执行
dataType: "json", //告诉服务器期待返回何种类型的数据
//请求成功后的回调函数
success : function(data) {
//alert(JSON.stringify(data));
var res = JSON.stringify(data);
var res2 = eval("("+res+")");//转换成json对象
alert(res2.data["stateInfo"]);//提示预约结果
if(res2.data["state"]==1){//预约成功需要更新库存数
var book = JSON.stringify(res2.data["appointment"]);
var appointment = eval("("+book+")");
$('td[id='+bid+']').html(appointment.book["number"]);
}
}
});
}
</script>
</html>
请求成功后，对库存量进行更新显示。
使用到，jQuery选择器，JSON格式数据在js中如何由string成json对象。json对象可以在js中通过
1）.号来得到某个属性的值。2）a[数字] 可以用索引方式获取某个属性的值 3)a[属性名] 可以通过属性名得到对应值。
相关推荐
前端JavaScript代码可以监听用户的事件（如点击按钮），然后发送Ajax请求到服务器，获取数据后动态更新页面。 下面是一个简单的Ajax请求示例，使用jQuery库： ```javascript $.ajax({ url: '/api/posts', // 调用...
在上述示例中，前端通过Ajax向`/ajaxchina`发送GET请求，后端Java控制器接收到请求并返回数据，前端接收到响应后更新页面内容。 需要注意的是，跨域问题在Ajax请求中很常见。如果前后端不在同一域名下，需要在后端...
- 使用jQuery的`$.ajax()`或`$.get()`、`$.post()`方法发起Ajax请求。例如，一个简单的GET请求可能如下所示： ```javascript $.ajax({ url: '/springmvc/ajax', // SpringMVC的Controller处理路径 type: 'GET',...
本文将深入探讨如何使用jQuery的AJAX方法发送JSON对象数组到Struts2的Action，并在后端进行处理。 首先，我们了解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于...
5. **Ajax请求**：在前端，使用jQuery的`$.ajax()`或者更高级的`$.post()`、`$.get()`方法发送Ajax请求，例如添加商品时，将商品信息发送到服务器。 6. **JSP页面**：展示商品列表和详细信息，使用Struts2的标签库...
标题中的"ajax直接jsp里写js发送服务器的请求"指的是使用Ajax技术在JSP页面中通过JavaScript发送异步请求到服务器的过程。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分...
本示例将探讨如何利用jQuery的Ajax功能向Struts2框架发送请求，并以JSON格式接收响应数据。下面我们将详细讨论这些技术以及它们在实际应用中的交互过程。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作...
3. **后端控制器（Controller）**：在MVC架构中，我们需要创建一个处理Ajax请求的控制器方法。这个方法会接收用户名，查询数据库以检查其唯一性。 ```java @GetMapping("/api/checkUsername") public Response...
- **创建（Create）**：用户在表单中输入数据，点击“创建”按钮，Ajax发送POST请求到控制器，控制器处理数据并保存到数据库，然后返回一个确认消息或新创建的数据，Ajax更新视图。 - **读取（Read）**：通过Ajax...
在这个例子中，我们发送了一个POST请求到服务器，并期望服务器返回JSON格式的数据。 3. **处理响应**：在Controller中处理业务逻辑后，返回的数据会通过Ajax回调函数的`success`参数传递。在前端，你可以根据需要...
1. **增加（Add）**：用户在前端界面填写数据后，通过AJAX发送POST请求到服务器。Struts2接收请求，Spring处理业务逻辑（如数据验证、持久化等），最后通过JSON或XML格式返回结果。前端接收到响应后，根据结果提示...
例如，当用户在前端进行某些操作，如提交表单，我们可以使用Ajax发送POST请求到Spring MVC的Controller，Controller处理业务逻辑后，将结果以JSON或其他格式返回。JavaScript接收到响应后，可以在前端动态更新页面，...
3. **发送请求**：在XMLHttpRequest对象上设置`open()`方法，指定请求类型、URL和异步标志。然后使用`send()`方法发送请求。如果请求是POST类型，需要在`send()`方法中传递数据。 4. **处理响应**：通过监听...
2. **Spring MVC中的Controller处理AJAX请求** 在Spring MVC中，我们通常定义一个@Controller注解的类，其中包含处理HTTP请求的方法。对于AJAX请求，这个方法通常会带有@RequestMapping注解，用来指定请求的URL和...
<button id="ajaxButton">发送AJAX请求 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function() { $("#ajaxButton").click(function() { $.ajax({ url: "ajax...
9. **跨域问题**：出于安全原因，浏览器限制了Ajax请求只能发送到同源（协议、域名和端口相同）的服务器。为了解决这个问题，可以使用CORS（Cross-Origin Resource Sharing）或者JSONP（JSON with Padding）。 10. ...
它可能会使用jQuery或其他库简化Ajax操作，例如$.ajax()或$.getJSON()方法，向服务器发送GET或POST请求。 2. jsp文件：这些是JavaServer Pages，是视图层的组成部分。它们可以包含HTML、CSS和嵌入的Java脚本，用于...
在学生成绩查询场景中，通常需要用户输入查询条件（如学号、姓名），然后通过 Ajax 发送这些条件到服务器。服务器根据条件从数据库中查询相应的成绩，返回给前端。前端 JavaScript 接收到数据后，可以动态创建 HTML ...
例如，当你在前端使用jQuery监听用户事件，如表单提交，然后通过Ajax发送请求，Struts1的Action接收到请求后处理业务逻辑，最后Ajax回调函数根据服务器返回的数据更新页面。这样的流程避免了页面的完全刷新，提高了...
这段代码会向服务器发送一个POST请求，带上名为`param1`的参数，服务器响应后，`success`回调函数会被调用，你可以在这里处理返回的数据。 4. **集成与测试** 将项目部署到Web服务器上，然后在浏览器中访问页面，...