ajax后台得到数据写入指定的标签中

最新推荐文章于 2021-08-06 09:19:18 发布
最新推荐文章于 2021-08-06 09:19:18 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fdk2zhang/article/details/87273966
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
	学生信息管理平台
</title>
	<link href="../../Style/StudentStyle.css" rel="stylesheet" type="text/css" />
	<link href="../../Script/jBox/Skins/Blue/jbox.css" rel="stylesheet" type="text/css" />
	<link href="../../Style/ks.css" rel="stylesheet" type="text/css" />
	<link href="../../css/mine.css" type="text/css" rel="stylesheet">
    <script src="../../Script/jBox/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../../Script/jBox/jquery.jBox-2.3.min.js" type="text/javascript"></script>
    <script src="../../Script/jBox/i18n/jquery.jBox-zh-CN.js" type="text/javascript"></script>
    <script src="../../Script/Common.js" type="text/javascript"></script>
    <script src="../../Script/Data.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("[name=deptid]").change(function(){
                var did=$(this).val();
                if(did==-1){
                    alert("请选择学院");
                    $("[name=majorid]")[0].length=0;
                    $("[name=majorid]")[0].add(new Option("请选择",-1));
                }else{
                    $.ajax({
                        url:"/Educational/class/getmajorbydid",
                        data:"did="+did,
                        type:"post",
                        dataType:"json",
                        success:function(rs){
                           //将专业添加到元素中
                            $("[name=majorid]")[0].length=0;
                            $("[name=majorid]")[0].add(new Option("请选择",-1));
                            for(var i=0;i<rs.length;i++){
                                //alert(rs[i].majorname);
                              $("[name=majorid]")[0].add(new Option(rs[i].majorname,rs[i].majorid));
                            }
                        }

                    });
                }

            });




            $("[name=majorid]").change(function(){
                var did=$("[name=deptid]").val();
                var mid=$(this).val();
                if(mid==-1){
                    alert("请先选择学院");
                }else{
                    $.ajax({
                        url:"/Educational/class/getteacher",
                        data:"did="+did+"&mid="+mid,
                        type:"post",
                        dataType:"json",
                        success:function(rs){
                            $("[name=classteacher]")[0].length=0;
                            for(var i=0;i<rs.length;i++){
                                $("[name=classteacher]")[0].add(new Option(rs[i].userName,rs[i].userName));
                            }
                        }
                    });
                }
            });








        })
    </script>

</head>
<body>

		<div class="div_head">
            <span>
                <span style="float:left">当前位置是：教务中心-》班级管理-》新增</span>
                <span style="float:right;margin-right: 8px;font-weight: bold"></span>
            </span>
        </div>
</div>
<div class="cztable">
    <form action="/Educational/class/addclass" method="post">
	<table border="1" width="100%" class="table_a">
                
                <tr>
                    <td  width="120px;">班级编号：<span style="color:red">*</span>：</td>
                    <td>
                       <input type="text" name="classnum" value="201602B" />
                    </td>
                </tr>
               
               <tr>
                    <td>学院<span style="color:red">*</span>：</td>
                    <td>
                        <select name="deptid">
                            <option value="-1">请选择</option>
                            <c:forEach items="${dlist}" var="d">
                        	     <option value="${d.departid}">${d.departname}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>专业<span style="color:red">*</span>：</td>
                    <td>
                        <select name="majorid">
                              <option value="-1">请选择</option>
                        </select>
                    </td>
                </tr>
               
				<tr>
                    <td>班主任：<span style="color:red">*</span>：</td>
                    <td>
						<select name="classteacher">
						   <option>请选择</option>
						</select>
					</td>
                </tr>
                <tr>
                    <td>班级名称：<span style="color:red">*</span>：</td>
                    <td>
						<input type="text" name="classname" value="2016春篮球" /></td>
                </tr>
				<tr>
                    <td>人数：<span style="color:red">*</span>：</td>
                    <td>
						<input type="text" name="peoplecount" value="" /></td>
                </tr>
				 <tr>
                    <td>开班时间：<span style="color:red">*</span>：</td>
                    <td>
						<input type="text" name="classbegin" value="2013-10-10" /></td>
                </tr>
                <tr>
                    <td>毕业时间：<span style="color:red">*</span>：</td>
                    <td>
						<input type="text" name="classend" value="2013-10-10" /></td>
                </tr>
				<tr>
                    <td>QQ：<span style="color:red">*</span>：</td>
                    <td>
						<input type="text" name="classqq" value="" /></td>
                </tr>
					<tr>
                    <td>宣传语：<span style="color:red">*</span>：</td>
                    <td>
						<input type="text" name="tagline" value="" /></td>
                </tr>
			
			


                <tr>
                    <td>简介<span style="color:red">*</span>：</td>
                    <td>
                        <textarea name="classcontent">一个新开辟领域的探讨，探讨摸索</textarea>
                    </td>
                </tr>
				

				
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="保存">
                    </td>
                </tr>  
            </table>
	</form>
</div>

            </div>
        </div>
    </div>
</body>
</html>
烦到困
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax请求后台数据，并将其渲染在页面中
huang_jimei的博客
07-06 3768
一、ajax的定义 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 二、例子 （1）将下面的请求到的数组渲染到页面中 （2）主要代码 <ul id="sendList"></ul> <script type="text/java
python爬取微博评论（无重复数据）
Python_sn的博客
09-29 3104
python爬取微博评论（无重复数据） 前言 一、整体思路 二、获取微博地址 1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址 三、获取主评论 四、获取子评论 1、解析子评论2、获取子评论 五、主函数调用 1、导入相关库2、主函数执行3、结果 写在最后 很多人学习python，不知道从何学起。 很多人学习python，掌握了基本语法过后，不知道在哪里寻找案例上手。 很多已经做案例的人，却不知道如何去学习更加高深的知识。 那么针对这三类人，我给大家提供一个好的学习平台，
【dtoj#4946】Solo
SSOI_Keyly
11-09 110
传送门 来源：2020百度之星初赛第二场 题目描述 Alice 和 Bob 准备 solo 一场算法竞赛。 比赛一共有 nnn 个题，编号为 1,2,…,n1,2,\dots,n1,2,…,n，对于第 iii道题，Alice 需要 a[i]a[i]a[i] 分钟写出一份正确的代码，Bob 需要 b[i]b[i]b[i] 分钟写出一份正确的代码。 比赛规则为 每道题第一个通过的人积 1 分，如果两人同时 AC 该题，只有 Alice 得分。 比赛时长为 101810 ^ {18}1018分钟。 Alice
ajax返回json数组遍历添加到html
weixin_34416649的博客
04-12 271
　　　大致需求为类型限制根据类型获取不同结果列表，再根据模糊查询搜索出结果，效果如下： 　　　　那么这里可以得知，选中不同下拉选项请求接口带个type参数返回不同结果，并动态加入select框中。我写了个searchKeywords函数，方便调用。 html源码： 　　　　　　<div id="isShowDIv"> <div class="control-...
ajax添加标签内容,使用jQuery UI添加标签，然后通过ajax填充内容
weixin_39637059的博客
08-06 298
好吧，基本上我使用的是ui.tabs，我想在第一个标签中有一个链接触发添加2个新标签，两者都会由ajax调用填充，该调用取决于所点击的链接的值。我有以下HTML：使用jQuery UI添加标签，然后通过ajax填充内容asdfasdfasdfasfasfasdfasdfasdfasfasf然后jQuery的到目前为止是这样的：$(function(){var tabs = $("#tabs").t...
ajax将数据显示在class为content的标签中_大数据从入门到深入：JavaEE 之 项目实战 项目基础编码阶段（4）...
weixin_29920047的博客
12-25 128
2.4 学生信息添加2.4.1 产品经理阶段完成考生信息的添加功能,要求添加考生信息的同时需要添加考试成绩信息;2.4.2 项目经理阶段项目需求分析:两处难点 : 1) 所属地区 需要根据不同的地区展示不同的学校 2) 学生表数据和成绩表数据不是同一个表的数据,添加非常的有难度!2.4.3 程序员阶段页面代码<%@ page language="java" contentTyp...
ajax接收后台数据在html页面显示
08-31
接着，将后台的数据（这里假设是`newsList`）转换为JSON对象，通过`JSONArray.fromObject(newsList)`完成，然后将其转换为字符串`str`，最后使用`out.write(str)`将数据写入响应流，传送到前端。 在前端，我们使用...
ajax前台后台跨域请求处理方式
08-28
如果存在，说明是JSONP请求，服务器需要将返回的JSON数据包装在`callback`参数指定的函数名中。如果不包含`callback`参数，那么就按照正常的JSON格式返回数据。 以下是一个简单的Java示例，展示如何处理JSONP请求：...
jQuery+json+servlet 动态取后台数据
04-06
标题“jQuery+json+servlet 动态取后台数据”揭示了一个常见的Web开发场景，其中前端JavaScript库jQuery被用来从后端服务器（通过servlet）获取动态数据，这些数据以JSON（JavaScript Object Notation）格式传输。...
ajax异步上传文件实现
05-15
这通常涉及到接收`multipart/form-data`编码的数据，解析`file`字段，然后将文件写入到服务器的指定位置。 标签“ajax”和“异步文件上传”表明，这个主题是关于使用Ajax技术实现实时文件上传，而无需等待整个页面...
jquery中获得$.ajax()事件返回的值并添加事件的方法
12-09
如果想获得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想获得xx的值，要在script中，使用全局变量。利用全局变量引出xx的值。jquery 取得$.ajax事件中的返回值，并添加事件 代码如下:<html> <head> <title>测试JQUERY提交动态文本</title> [removed][removed] [removed] $(function(){ //引用的jquery文件我就不上传了，大家应
ajax实现天气动态刷新
12-07
对于标签中的"java web"，这表明可能涉及到服务器端的Java编程。在Java中，我们可以创建一个Servlet来接收和处理Ajax请求。以下是一个简单的Servlet示例： ```java import javax.servlet.http.HttpServlet; import ...
java抓取网页数据_借我一双慧眼吧！网页中抓取关键数据只要三分钟
weixin_39875754的博客
11-26 80
全文共1589字，预计学习时长10分钟图源：unsplash有人说，数据会取代石油的地位，成为未来最珍稀的资源之一。无论这个命题是否成立，毫无疑问，数据或信息(任意形式)已然成为21世纪最宝贵的无形资产之一。数据极其强大，用途颇广：可以预测销售的未来趋势以获利，可以在医疗保健行业中用于诊断早期结核病，从而挽救患者的生命……而数据科学家要做的是，如何从各种资源中提取有价值的数据。本文将帮助你掌握这个...
ajax接收后台传来的JSON类型数据，可通过循环遍历为input赋值（input的ID需要和返回来的数据名相同）
wangxinaz的博客
08-17 6065
$.ajax({ url:"${ctx}/commonquery/query/getDataJsonArray", type:"post", dataType:"json", data:{  "fileName":"Management/sysManagement_SelectUpd",  "redirect":"modules/sysManagement/AntennaModelUp
ajax如何给label赋值,如何让AjaxEditableLabel显示TextField？
weixin_32389853的博客
08-05 451
AjaxEditableLabel task = new AjaxEditableLabel("task", new PropertyModel(getModel(), "task"));现在我所要做的是在一定条件下这个AjaxEditableLabel将呈现为TextField。默认情况下，它呈现为Label。如果模型String任务为空或空白，则AjaxEditableLabel将为TextF...
html如何遍历ajax数组,ajax返回json数组遍历添加到html
weixin_31650287的博客
06-20 965
大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:…例子:利用AJAX返回JSON数据,间接访问数据库,查出Nation 表,并用下拉列表显示 造一个外部下拉列表框 JQurey代码 $(document).ready(function(e) { //调用ajax $.ajax({ url:"JsChuLi.php", //返回类型是JSON数据 dataType:...
一个<c:forEach>标签改ajax异步加载的例子
weixin_34221036的博客
07-28 526
2019独角兽企业重金招聘Python工程师标准>>> ...
php ajax 弹出div,ajax+php如何获取部分请求的信息显示在对应的div中
weixin_29860267的博客
08-06 291
C&plus;&plus;程序员如何入门Unreal Engine 4摘要: 一位程序员网友小保哥分享自己的UE4快速上手过程,只是笔记,52VR做了一点更加适合阅读的修改,整理给大家. 首先,本文只是针对有比较熟练C++技能的程序员,他可以没有任何图形学或游戏引擎方面 ...ASP&period;net封装设计如下: 代码: using System; using Sys...
利用Ajax与后台传输数据的三种方式
qq_42533807的博客
08-22 2224
1.把数据放到url中传递 js： <code> var id = $("#id").val(); $.ajax({ type: "POST", url: "/IFTree/people/getPeopleById/"+id,//参数放在url中 success:function(data){ alert(data); }, error:function(xhr, textStat...
ajax获取的数据如何写入页面中
最新发布
09-05
### 回答1： Ajax 获取的数据可以使用 JavaScript 进行操作，然后写入页面中。具体来说，可以使用以下步骤： 1. 定义一个 JavaScript 函数，用于执行 Ajax 请求，并处理响应数据。 2. 在该函数中，使用 XMLHttpRequest 对象发起请求，并监听该对象的 readystatechange 事件，以确定请求的状态。 3. 当 readystate 为 4 且请求成功时，通过 responseText 属性获取服务器响应的文本数据。 4. 对于该数据，您可以使用 JavaScript 进行任何操作，例如将其转换为 JSON 对象，并通过使用 DOM 操作，将其写入页面中的任何元素。 这是一个简单的示例： ``` function updatePage() { var xhr = new XMLHttpRequest(); xhr.open("GET", "data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); document.getElementById("result").innerHTML = data.message; } }; xhr.send(); } ``` 在此示例中，我们向 data.json 发出请求，并在响应中读取 message 字段的值。最后，我们将该值写入页面中的 "result" 元素。 ### 回答2： 使用AJAX获取到的数据可以通过以下几种方式写入页面中： 1. innerHTML属性：可以将获取到的数据直接赋值给页面元素的innerHTML属性，例如： ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("myElement").innerHTML = xhr.responseText; } }; xhr.send(); ``` 上述代码中，通过AJAX获取到的数据会被赋值给id为"myElement"的页面元素的innerHTML属性。 2. DOM操作：可以通过DOM操作将获取到的数据插入到页面中的特定位置，例如： ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); var newElement = document.createElement("p"); newElement.innerHTML = data.name; document.getElementById("myContainer").appendChild(newElement); } }; xhr.send(); ``` 上述代码中，先通过AJAX获取到的数据解析为JSON对象后，创建一个新的p标签，将获取到的数据赋值给新创建的元素的innerHTML属性，最后将新元素插入到id为"myContainer"的页面容器中。 3. 模板引擎：可以使用模板引擎（如Mustache、Handlebars等）将获取到的数据与HTML模板进行结合生成最终的页面内容，例如： ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "data.txt", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var template = document.getElementById("template").innerHTML; var data = JSON.parse(xhr.responseText); var rendered = Mustache.render(template, data); document.getElementById("myContainer").innerHTML = rendered; } }; xhr.send(); ``` 上述代码中，首先获取到id为"template"的HTML模板，然后将获取到的数据解析为JSON对象，通过Mustache.render()方法将数据与模板结合生成最终的结果，最后将结果赋值给id为"myContainer"的页面容器。 ### 回答3： 使用Ajax获取的数据可以通过多种方式写入页面中。以下是几种常见的方法： 一、使用innerHTML属性：通过该属性可以直接将数据作为HTML代码写入到指定的页面元素中。例如，假设我们有一个id为"content"的div元素，可以使用以下代码将获取的数据写入到该div中： ```javascript document.getElementById("content").innerHTML = ajaxData; ``` 二、使用innerText或textContent属性：如果获取的数据不需要解析为HTML代码，可以使用innerText或textContent属性将数据写入到指定的页面元素中。例如： ```javascript document.getElementById("content").innerText = ajaxData; // 或者 document.getElementById("content").textContent = ajaxData; ``` 三、创建新的HTML元素：可以通过JavaScript动态创建新的HTML元素，并将获取的数据添加到这些新元素中，然后将这些元素插入到页面中的适当位置。例如，假设我们想要将获取的数据写入到一个新的p标签中，并将其添加到id为"content"的div元素中，可以使用以下代码： ```javascript var p = document.createElement("p"); p.innerHTML = ajaxData; document.getElementById("content").appendChild(p); ``` 四、使用jQuery的方法：如果项目中引入了jQuery库，也可以使用其提供的方法来操作DOM。例如，使用jQuery的html()方法将获取的数据写入到指定的页面元素中： ```javascript $("#content").html(ajaxData); ``` 无论采用哪种方法，都可以根据具体需求和项目的开发环境选择最适合的方式将获取的数据写入到页面中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值